chrome插件开发

谷歌浏览器插件
清单文件 manifest.json 注解：
"name": 名称（字符串类型需要加引号）
"description": 描述
"version": 版本由1到4个整数构成。多个整数间用.隔开示例 "1.0.1"
"manifest_version": 清单版本（V2 或 V3）

最简单的插件示例

{
  "name": "demo",
  "description": "my Extension!",
  "version": "1.1",
  "manifest_version": 3
}

将上面代码保存为 manifest.json文件中单独存在在一个文件夹目录下
然后打开浏览器-扩展程序-开发者模式（在右上角）
点击 加载已解压的扩展程序 找到存放manifest.json文件的目录
就能看到插件了---

"options_page": 点击插件图标（右键插件图标）出现 选项 按钮跳转的页面

点击插件图标动作。显示的页面
V3版本下

"action": {
  "default_popup": "pop.html"
  },

v2版本下

"browser_action" :{
        "default_popup": "pop.html"
            "default_icon": "popup.png"   //插件图标
    },

图标

"icons" : {
  "16" : "icon16.png",
  "32" : "icon32.png",
  "48" : "icon48.png"
  "128" : "icon128.png"
}

后面是图标路径如不在同一目录下 "image/icon-128.png"

权限相关

// 根据自己使用的权限填写
  "permissions": [
    // 例如
    "tab",
    "storage",
    // 如果会在js中请求外域API或者资源，则要把外域链接加入
    "http://localhost:5000/*"
  ],

① 模式配匹：用于指定扩展会在哪些URL中生效。例如：
http://*/*：匹配任何http协议的URL。

*://*/*：匹配任何http/https协议的URL。

http://127.0.0.1/*：匹配任何本地请求URL。

https://www.baidu.com/*：匹配https://www.baidu.com/开头的所有URL。

<all_urls>：匹配所有url。

② background：启用扩展后端环境。即在浏览器运行期始终运行，与单个页面无关。可以在这里调用浏览器的API，通常在这里进行扩展主要逻辑的开发。配合manifest.json的background字段使用。

③ bookmarks：启用书签权限。

④ contextMenus：启用右键菜单权限。可针对不同文档单独定制。

⑤ cookies：启用cookies权限。

⑥ experimental：启用chrome的实验功能API。

⑦ geolocation：允许扩展使用HTML5的地理位置API，无论用户是否有该权限。

⑧ history：启用history权限。

⑨ idle：启用延迟加载。

⑩ management：启用管理权限。用于管理已安装和正在运行的扩展。

⑪ notifications：启用桌面通知权限。不同平台下表现不同，但往往都是一个小弹窗。

⑫ tabs：启用标签权限。用于管理chrome浏览器的标签栏，例如创建，修改，重新排列标签等，以及修改chrome窗体。

⑬ activeTab：启用活动标签权限。通常来说，tabs更多是用于操作tab标签和窗体属性的。对那些可以与当前web页面交互的API，往往都需要activeTab权限。例如，tabs.executeScript（向页面临时注入js并执行）和tabs.insertCSS（向页面临时注入css并执行），执行浏览器按钮，执行页面按钮，执行右键菜单项，通过命令API执行键盘快捷键等。

// content_scripts 在各个浏览器页面里运行的文件，可以获取到当前页面的上下文DOM
会在每个标签页初始化加载的时候进行调用，关闭页面时卸载
// 引入注入脚本

"content_scripts": [
  {
    "js": ["content_script.js"],
    // 在什么情况下使用该脚本  matches 匹配 content_scripts 可以在哪些页面运行
    "matches": [
      "http://*/*",
      "https://*/*"
    ],
    // 什么情况下运行【文档加载开始】
    "run_at": "document_start"
  }
],

// "<all_urls>" 表示匹配所有地址
示例："matches": ["<all_urls>"],

背景页
// background，后台执行的文件，一般只需要指定js即可。会在浏览器打开后全局范围内后台运行

 "background": {
    "scripts": ["js/vendor/jquery-3.1.1.min.js", "js/background.js"],
    // persistent代表“是否持久”。如果是一个单纯的全局后台js，需要一直运行，则不需配置persistent（或者为true）。当配置为false时转变为事件js，依旧存在于后台，在需要时加载，空闲时卸载 。 后台常驻脚本，自动运行，直到关闭浏览器。可根据需求自行设置
    "popup" : "background.html",
 /** 调试页，background 不出现于用户视窗内的。 **/
   /** 在扩展工具页面，检查视图进行调试 (需要勾选__开发者模式__选项)**/
    "persistent": false
  },

注解
background 后台控制脚本，background.html是一个常驻的页面
"page": "background.html"

----报错----

Refused to execute inline event handler because it violates the following Content Security Policy directive: "script-src 'self' <URL>". Either the 'unsafe-inline' keyword, a hash ('sha256-...'), or a nonce ('nonce-...') is required to enable inline execution. Note that hashes do not apply to event handlers, style attributes and javascript: navigations unless the 'unsafe-hashes' keyword is present.

Chrome 插件不支持在插件的 html 上写内联 js

键盘快捷键

// 新增命令
  "commands": {
    "_execute_browser_action": {
      "suggested_key": {
        "default": "Ctrl+Shift+F",
        "mac": "MacCtrl+Shift+F"
      },
      "description": "Opens popup.html"
    }
  }

安装第三方.crx后缀的插件（非谷歌插件商店来源）
方法1. 将后缀名crx改为zip 然后解压通过 加载已解压的扩展程序 的方式安装

chrome插件开发

网站统计