组成

• manifest.json
• background script
• content script
• popup

  （一）manifest.json

  一个插件，必须都含有这个一个文件——manifest.json，位于根目录。顾名思义，这是一个扩展的组成清单，在这个清单里能大约看到该插件的一个“规则”。
  {
  // 必须 manifest_version必须是 2
  “manifest_version”: 2,
  “name”: “插件名称”,
  “version”: “1.1.2”,
  // 推荐
  “default_locale”: “en”,
  “description”: “插件的描述”,
  // 不同地方显示chrome插件不同的图标
  “icons”: {
  “16”: “img/icon.png”, // 扩展程序页面上的图标
  “32”: “img/icon.png”, // Windows计算机通常需要此大小。提供此选项可防止尺寸失真缩小48x48选项。
  “48”: “img/icon.png”, // 显示在扩展程序管理页面上
  “128”: “img/icon.png” // 在安装和Chrome Webstore中显示
  },
  // 可选
  “background”: {
  “page”: “background/background.html”,
  “scripts”: [“background.js”],
  // 推荐
  “persistent”: false
  },
  // 若没有设置default_popup，将执行chrome.browserAction.onClicked的内容，若没有设置，就什么都不执行了。也就是如果设置了default_popup，就不会执行chrome.browserAction.onClicked了
  // 和browser_action 类似的还有一个page_action，区别在于：Browser Action对在浏览器中加载的所有网页都生效；Page Action针对特定的网页生效 https://developer.chrome.com/extensions/pageAction
  “browser_action”: {
  “default_icon”: “img/icon.png”,// 插件栏上显示的图标
  “default_title”:”悬浮在工具栏插件图标上时的tooltip内容”,// 悬浮上面显示的描述
  “default_popup”: “hello.html” //单击图标弹出的页面不允许内联JavaScript。
  },
  “content_scripts”: [ {
  “js”: [ “inject.js” ],
  “matches”: [ “http://*/*“, “https://*/*“ ],
  “run_at”: “document_start”
  } ],
  “permissions”: [
  “contextMenus”,
  “tabs”,
  “http://*/*“,
  “https://*/*“
  ],
  “web_accessible_resources”: [ “dist/“, “dist/**/“ ]
  }

  （二）background script

  background可以理解为插件运行在浏览器中的一个后台网站/脚本，注意它是与当前浏览页面无关的。

  (三) content script

  这部分脚本，简单来说是插入到网页中的脚本。

  基础的通信机制

  主要是content script与background的通信，也就是相当于当前页面与background通信，最常用的就是解决跨域问题。
  1.content-script向background发消息
  在content-script端
  chrome.runtime.sendMessege(
  message,
  function(response) {…}
  )
  在background端
  chrome.runtime.onMessege.addListener(
  function(request, sender, sendResponse) {…}
  )
  2.background向content-script发送消息
  一个插件里只有一个background环境，而content-script有多个（一个页面一个），那么background怎么向特定的content-script发送消息？
  在background端
  首先我们需要知道要向哪个content scripts发送消息，一般一个页面一份content scripts，而一个页面对应一个浏览器tab，每个tab都有自己的tabId，因此首先要获取要发送消息的tab对应的tabId。
  /*
  获取当前选项卡id
  @param callback - 获取到id后要执行的回调函数
  /function getCurrentTabId(callback) {
  chrome.tabs.query({active: true, currentWindow: true}, function (tabs) {
  if (callback) {
  callback(tabs.length ? tabs[0].id: null);
  }
  });
  }
  当知道了tabId后，就使用该api进行发送消息
  chrome.tabs.sendMessage(tabId, message, function(response) {…});
  在content-script端
  chrome.runtime.onMessege.addListener(function(request, sender, sendResponse) {…})

chrome插件开发