chrome插件开发

关键字: chrome扩展、chrome extensions、chrome插件操作dom

今天来自己实现添加一个chrome扩展。

版本

• 83.0.4103.61（正式版本） （64 位）

入口

• chrome://extensions/
• chrome -> 更多工具 -> 扩展程序
• 打开开发者模式，点击加载已解压的扩展程序

manifest文件

首先要有一个JSON格式的manifest文件

{
  "manifest_version": 2,
  "name": "登录",
  "version": "1.0",
  "description": "描述文案",
  "browser_action": {
    "default_icon": "images/login.png",
    "default_title": "鼠标悬浮文案",
    "default_popup": "popup/index.html"
  },
  "background": {
    "scripts": ["background/background.js"]
  },
  "permissions": [
    "contextMenus"
  ],
  "icons": {
    "48": "images/login.png",
    "128": "images/login.png"
  },
  "content_scripts": [{
    "matches": ["*://*/*"],
    "js": ["content.js"]
  }]
}

1，以下三个字段为必须：

manifest_version -- 表示manifest文件自身格式的版本号, 需指定为2
name -- 用来标识扩展的简短纯文本。
version -- 扩展的版本,用一个到4个数字来表示，中间用点隔开。

2，icons配置扩展管理页面使用的图标。图标要求是png格式，通常是128x128或48x48的图标。

"icons": 
  {           
    "48": "icon48.png",            
    "128": "icon128.png" 
  }

如下图左上角小狮子：

扩展信息图

3，background
背景页是一个运行在扩展进程中的HTML页面。它在你的扩展的整个生命周期都存在，可以用来管理一些任务或者状态，比如使用背景页来在Chrome的右键菜单中增加自己的菜单项.

"background": {
    "scripts": ["background.js"]
 }

浏览器的扩展系统会自动根据上面scripts字段指定的所有js文件自动生成背景页。
如果您的确需要自己的背景页，可以使用page字段，比如：

  "background": {
    "page": "background.html"
  }

4，Context Menus
用于在Chrome的右键菜单中增加自己的菜单项。
1）首先必须在清单中声明“contentMenus”权限。

"permissions": [
   "contextMenus"
 ]

2）通过id 和 parentId来构建父子菜单关系，onclick声明点击后的回调函数。

const menu = {
    "menus": [
      {"id": "main", "title": "login" },
      {"id": "login", "title": "填充密码", "parentId": "main", onclick: () => cb('login')}
    ]
  };
 
  const createMenu = () => {
   menu.menus.forEach(value => {
     chrome.contextMenus.create(value);
   })
 };
 createMenu()

5，Browser Actions
可以在chrome主工具条的地址栏右侧增加一个图标。

"browser_action": {
    "default_icon": "images/login.png",
    "default_title": "点我",
    "default_popup": "popup/index.html"
}

default_icon -- 展示icon。
default_title -- 鼠标悬浮icon上时浮现的文案。
default_popup -- 用来创建点击图标后弹出的选项内容html。

该html中可以引用js文件，来增加你想增加的交互逻辑。需要注意的是，此时你无法与浏览器当前所访问页面的元素进行交互。也就是说，无法对当前web页面的dom元素进行操作。
但你可以通过使用messages机制来进行通信，先获取当前tab信息，然后通过chrome.tabs.sendMessage把信息传递出去。由Content Scripts进行接收执行。

- popup/index.html

    
popup选项
  

- index.js
const login = document.getElementById('login');

login.addEventListener('click', ()=> {
  chrome.tabs.query({ active: true, currentWindow: true }, function(tabs) {
    var activeTab = tabs [0]; 
    chrome.tabs.sendMessage(activeTab.id, { action: "login" })
  })
})

6, Content Scripts
在Web页面内运行的javascript脚本。通过使用标准的DOM，它们可以获取浏览器所访问页面的详细信息，并可以修改这些信息。

"content_scripts": [{
    "matches": ["*://*/*"],
    "js": ["content.js"]
  }]

通过chrome.runtime.onMessage可以接收传递的信息，并执行相应的dom操作。

chrome.runtime.onMessage.addListener(function(request, sender, sendMessage) {
  if (request.action == "login"){
    // action
  }

[参考链接]http://open.chrome.360.cn/extension_dev/overview.html