Chrome插件开发入门篇

• 概念
• 基本组成
• 常用API
• manifest
• background
• content-scripts
• 交互页面
• 通信
• 打包发布

Chrome扩展（Chrome Extension）

平时所说的Chrome插件更准确的说叫Chrome扩展，真正意义上的Chrome插件是更底层的浏览器功能扩展。鉴于习惯这种叫法，下面我们还叫Chrome插件

Chrome插件是什么？
Chrome插件是一个用Web技术开发、用来增强浏览器功能的软件，它其实就是一个由HTML、CSS、JS、图片等资源组成的一个.crx后缀的压缩包.

学习Chrome扩展的意义

• 增强浏览器功能，轻松实现属于自己的“定制版”浏览器

常用API

• chrome.tabs // 获取每个tabs页
• chrome.webRequest // 对任意http请求拦截处理，定制
• chrome.window // 当前window对象
• chrome.storage // 存储，类似于localStorge
• chrome.contextMenus // 右键菜单
• chrome.devtools // 开发者工具
• chrome.extension // 同chrome.runtime
• chrome.runtime
• chrome.cookies // cookies处理

基本组成

• 配置文件：manifest.json
• 后台脚本：background.js
• 内容脚本：content-scripts
• 交互页面：popup
• 其他逻辑文件

manifest

https://developer.chrome.com/docs/extensions/mv3/manifest/

{
  "manifest_version": 2,    // manifest版本：2
  "name": "find-idss-similar-color",   // 名称
  "version": "2021.05.10",      // 版本

  "description": "chrome 取色器插件 ", // 描述
  "icons": {        // 图标
    "16": "icons/16.png",
    "48": "icons/48.png",
    "128": "icons/128.png"
  },
  "permissions": [   // 需要配置的权限都在这里配置
    "tabs",
    "activeTab",
    "clipboardWrite",
    "storage",
    "contextMenus",
    "*://*/*",
    "<all_urls>"
  ],
  "commands": {           // 命令快捷键
    "toggle-color-picker": {
      "suggested_key": {
        "default": "Alt+Shift+A",
        "mac": "Alt+Shift+A"
      },
      "description": "快捷取色"
    }
  },
  "content_scripts": [   // 内容脚本配置
    {
      "matches": ["<all_urls>"],
      "js": ["js/content-script.js"],
      "run_at": "document_start"
    }
  ],
  "background": {           // 后台脚本配置
    "scripts": ["js/background.js"],
    "persistent": false
  },
  "browser_action": {        // 交互页面配置
    "default_popup": "popup/popup.html",
    "default_title": "find-idss-similar-color",
    "default_icon": {
      "19": "icons/19.png",
      "38": "icons/38.png"
    }
  },
  "externally_connectable": {  // 插件与外部通信配置
    "ids": ["*"],
    "matches": [
      "http://localhost:*/*",
      "http://192.168.0.135:81/*"
    ]
  }
}

background

后台脚本是扩展的事件处理程序，事件的监听器

  chrome.runtime.onInstalled.addListener
  chrome.runtime.onMessage
  chrome.commands.onCommand
  chrome.runtime.onConnectExternal.addListener
  chrome.contextMenus.onClicked
  ...

content-scripts内容脚本

content-scripts是Chrome插件中向页面动态注入脚本的一种形式，内容脚本和网页共用DOM，它可以将网页上的变更信息传递给其后台脚本。

注入方式

代码注入

"permissions": [
  "activeTab"
]

chrome.runtime.onMessage.addListener(
    function(message, callback) {
      if (message == “changeColor”){
        chrome.tabs.executeScript({
          code: 'document.body.style.backgroundColor="orange"'
        });
      }
   });
// 或者整个文件注入
chrome.runtime.onMessage.addListener(
    function(message, callback) {
      if (message == “runContentScript”){
        chrome.tabs.executeScript({
          file: 'contentScript.js'
        });
      }
   });

声明式注入

"content_scripts": [
   {
     "matches": ["http://localhost:*/*"],
     "css": ["myStyles.css"],
     "js": ["contentScript.js"]
   }
 ],

交互页面popup

popup是点击browser_action或者page_action图标时打开的一个小窗口网页，一般用来做一些临时性的交互。

通信

background.js或者popup.js 向 content-script.js 发消息

function sendMessageToContentScript(message, callback) {
	chrome.tabs.query({active: true, currentWindow: true}, function(tabs)
	{
		chrome.tabs.sendMessage(tabs[0].id, message, function(response)
		{
			if(callback) callback(response);
		});
	});
}
sendMessageToContentScript({cmd:'test', value:'你好，我是popup！'}, function(response) {
	console.log('来自content的回复：'+response);
});

content-script.js 接收

chrome.runtime.onMessage.addListener(function(request, sender, sendResponse) {
	// console.log(sender.tab ?"from a content script:" + sender.tab.url :"from the extension");
	if(request.cmd == 'test') alert(request.value);
	sendResponse('我收到了你的消息！');
});

content-script主动发消息给后台background.js

chrome.runtime.sendMessage({greeting: '你好，我是content-script呀，我主动发消息给后台！'}, function(response) {
	console.log('收到来自后台的回复：' + response);
});

background.js 或者 popup.js 接收

// 监听来自content-script的消息
chrome.runtime.onMessage.addListener(function(request, sender, sendResponse)
{
	console.log('收到来自content-script的消息：');
	console.log(request, sender, sendResponse);
	sendResponse('我是后台，我已收到你的消息：' + JSON.stringify(request));
});

打包发布

然后会生成一个.crx文件，要发布到Google应用商店的话需要先登录你的Google账号，然后花5个$注册为开发者.