chrome►chrome plugins

chrome-plugin-dvlp

阅读预计 5 分钟   |  约 902 字  
Chrome插件开发中, 碰到的几个知识点, 顺手记录下来. 包含 browserAction, tabs, windows, contentMenus.


1. 限制 有且仅有一个tab窗口

主要用到了 chrome.browserAction chrome.tabs chrome.windows 这三个API.
官方文档还是很强的, 简单明了.

以下是demo代码片段:

1
2
3
4
5
6
7
8
9
10
11
// file: manifest.json
{
    ...
    "background": {
      "persistent": true,
      "scripts": [ "js/background.js"]
      // "page": "background.html"
    },
    ...
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
// file: js/main.js
chrome.browserAction.onClicked.addListener(function(tab) {
  // iterator all tabs to get current tab info
  chrome.tabs.query({}, function(tt) {
    let ss = '',
    target = false
    for(let i of tt){ 
      if(i.url.indexOf(chrome.runtime.id) > -1){
        target = i
        break;
      }
    }
    if(!target){
      chrome.tabs.create({url:chrome.extension.getURL("main.html")})
    }else{
      chrome.windows.getCurrent({}, function(w){
        if(target.windowId != w.id){
          chrome.windows.update(target.windowId, {"focused":true})
        }else{
          chrome.tabs.update(target.id, {"active": true, url:chrome.extension.getURL("main.html")})
        }
      })
    }
  })
});


2. 自定义(仅指添加)右键菜单

  • 单选项目

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    // file: js/main.js
    chrome.contextMenus.removeAll()  // (没有checkExisted func, 所以需要)移除所有添加项, 否则会报ID已存在的错误
    let _0x02 = chrome.contextMenus.create({
        type: "radio",  // 菜单项类别, ["normal", "checkbox", "radio","separator"]
        id: "unique_id_0x02",  // id标识
        title: "displayed in the item 0x02",  // 要显示的字符串
        checked: false,  // 选中状态
        contexts: ["all"]  // 作用范围, ["all", "page", "frame", "selection", "link", "editable", "image", "video", "audio", "launcher", "browser_action", "page_action"]
    }, function(){console.log('0x02 done')}  // 菜单项目创建成功后的回调函数, 创建过程中发生异常可查看`chrome.runtime.lastError`
    )
    console.log(_0x02)
    let _0x05 = chrome.contextMenus.create({
        type: "radio",
        id: "unique_id_0x05",
        title: "displayed in the item 0x05",
        checked: false,
        contexts: ["all"]
    }, function(){console.log('0x05 done')}
    )
    console.log(_0x05)
    chrome.contextMenus.onClicked.addListener(onClickHandler);
    function onClickHandler(o, t) {
      console.log(o);
      console.log(t);
    };

    单选项目

  • 复选项目

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    // file: js/main.js
    chrome.contextMenus.removeAll()  // (没有checkExisted func, 所以需要)移除所有添加项, 否则会报ID已存在的错误
    let _0x00 = chrome.contextMenus.create({
        type: "checkbox",  // 菜单项类别, ["normal", "checkbox", "radio","separator"]
        id: "unique_id_0x00",  // id标识
        title: "displayed in the item 0x00",  // 要显示的字符串
        checked: false,  // 选中状态
        contexts: ["all"]  // 作用范围, ["all", "page", "frame", "selection", "link", "editable", "image", "video", "audio", "launcher", "browser_action", "page_action"]
    }, function(){console.log('0x00 done')}  // 菜单项目创建成功后的回调函数, 创建过程中发生异常可查看`chrome.runtime.lastError`
    )
    console.log(_0x00)
    let _0x01 = chrome.contextMenus.create({
        type: "checkbox",
        id: "unique_id_0x01",
        title: "displayed in the item 0x01",
        checked: false,
        contexts: ["all"]
    }, function(){console.log('0x01 done')}
    )
    console.log(_0x01)
    ...

    复选项目

  • 分割线

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    // file: js/main.js
    chrome.contextMenus.removeAll()  // (没有checkExisted func, 所以需要)移除所有添加项, 否则会报ID已存在的错误
    let _0x00 = chrome.contextMenus.create({
        type: "checkbox",  // 菜单项类别, ["normal", "checkbox", "radio","separator"]
        id: "unique_id_0x00",  // id标识
        title: "displayed in the item 0x00",  // 要显示的字符串
        checked: false,  // 选中状态
        contexts: ["all"]  // 作用范围, ["all", "page", "frame", "selection", "link", "editable", "image", "video", "audio", "launcher", "browser_action", "page_action"]
    }, function(){console.log('0x00 done')}  // 菜单项目创建成功后的回调函数, 创建过程中发生异常可查看`chrome.runtime.lastError`
    )
    console.log(_0x00)
    let _0x03 = chrome.contextMenus.create({
        type: "separator",
        id: "unique_id_0x03",
        title: "displayed in the item 0x03",
        checked: false,
        contexts: ["all"]
    }, function(){console.log('0x03 done')}
    )
    console.log(_0x03)
    let _0x01 = chrome.contextMenus.create({
        type: "checkbox",
        id: "unique_id_0x01",
        title: "displayed in the item 0x01",
        checked: false,
        contexts: ["all"]
    }, function(){console.log('0x01 done')}
    )
    console.log(_0x01)
    ...

    分割线

  • 默认样式 + 父子项目

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    // file: js/main.js
    chrome.contextMenus.removeAll()  // (没有checkExisted func, 所以需要)移除所有添加项, 否则会报ID已存在的错误
    // 如果这里有两个及以上的 1级项目, 会自动退缩为 `manifest.json.name` 的子级
    let _0x04 = chrome.contextMenus.create({
        type: "normal",
        id: "unique_id_0x04",
        title: "displayed in the item 0x04",
        checked: false,
        contexts: ["all"]
    }, function(){console.log('0x04 done')}
    )
    console.log(_0x04)
    let _0x06 = chrome.contextMenus.create({
        type: "normal",
        id: "unique_id_0x06",
        parentId: "unique_id_0x04",
        title: "displayed in the item 0x06",
        checked: false,
        contexts: ["all"]
    }, function(){console.log('0x06 done')}
    )
    console.log(_0x06)
    let _0x07 = chrome.contextMenus.create({
        type: "normal",
        id: "unique_id_0x07",
        parentId: "unique_id_0x04",
        title: "displayed in the item 0x07",
        checked: false,
        contexts: ["all"]
    }, function(){console.log('0x07 done')}
    )
    console.log(_0x07)
    ...

    默认样式 + 父子项目


划重点

  • need Permissions-contextMenus in manifest.json
  • Context menu items can appear in any document (or frame within a document), even those with file:// or chrome:// URLs.
  • you should specify a 16x16-pixel icon for display