chrome 插件的编写

:blush:最核心的就是这个 manifest.json了

{
  "name": "Hello Extensions",
  "description" : "Base Level Extension",
  "version": "1.0",
  "manifest_version": 2,
  "browser_action": {
    "default_popup": "hello.html",
    "default_icon": {
      "16":"images/hello_extensions.png.png"      
    }
  },
  "commands": {
    "_execute_browser_action": {
      "suggested_key": {
        "default": "Ctrl+Shift+F",
        "mac": "MacCtrl+Shift+F"
      },
      "description": "Opens hello.html"
    }
  },
  "background": {
    // "scripts": ["background.js"],
    "page": "background.html"//应该是为了方便调试吧
  },
  "permissions": [
    "downloads", "<all_urls>"
  ]
  ,
  "content_scripts":[
      {
          "matches":["*://*/*"],
          "js":["jquery.min.js"]
      }
  ]
}

首先是这个 browser_action,根级上的一个属性,如下设置

"browser_action": {
  "default_popup": "hello.html",
  "default_icon": {
    "16":"images/hello_extensions.png.png"      
  }
}

上面的配置指定了，chrome插件的图标，就是chrome右上角那个图标，并点击弹出一个气泡，气泡的内容就是hello.html的内容。然后一个事儿就是设置extention的icon，完整的长这样。

   "browser_action": {
      "default_icon": {                    // optional
        "16": "images/icon16.png",           // optional
        "24": "images/icon24.png",           // optional
        "32": "images/icon32.png"            // optional
      },
      "default_title": "Google Mail",      // optional; shown in tooltip
      "default_popup": "popup.html"        // optional
    },

然后说一下下面这块是定义一个组合键，然后呼出popup

  "commands": {
    "_execute_browser_action": {//从变量的直译就是执行browser_action吗
      "suggested_key": {
        "default": "Ctrl+Shift+F",
        "mac": "MacCtrl+Shift+F"
      },
      "description": "Opens hello.html"
    }
  },

下面是背景html和js，或者只是背景js，背景js就是这个插件加载后，就会在浏览器背景里面运行一个js，所有的页面都公用这个js。有html本人认为有一个目的是方便调试。

  "background": {
    // "scripts": ["background.js"],
    "page": "background.html"//应该是为了方便调试吧
  }

下面是权限的配置

  "permissions": [
    "downloads", "<all_urls>"
  ]

上面的downloads顾名思义就是提供了自动下载页面网址的权限，后面的 <all_urls>加入后会在chrome://extentions里面的插件配置项里面显示允许访问地址的checkbox，这个是我写的那个例子里面有如下这段

chrome.windows.getCurrent(function (currentWindow) {
    chrome.tabs.query({active: true, windowId: currentWindow.id},
                      function(activeTabs) {
      chrome.tabs.executeScript(
        activeTabs[0].id, {file: 'pickimg.1.js', allFrames: true});
    });
});

上面一段代码中的file: 'pickimg.1.js',就是调用外部吧文件的地址吧，发现去掉<all_urls>，这段代码就不能执行了。

chrome 插件的编写1

chrome 插件的编写

猜你喜欢