chromebrowser70.0.3538.80_Chrome插件开发入门

什么是Chrome插件

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

        Chrome插件开发的技术栈是由Web技术(HTML,CSS,JS,图片等)和 Chrome 底层 API 组成&＃xff1b;完成插件开发后编译成 .crx 压缩包发布到应用商店&＃xff1b;插件的不同模块之间是相对独立的&＃xff0c;模块之间的数据交互是异步通信&＃xff0c;通信连接包含了短连接和长连接。

六大核心

        manifest.json 是 Chrome 插件中必须的配置文件&＃xff0c;且必须放到项目的根目录&＃xff0c;文件中包括名字、版本、面板&＃xff0c;权限&＃xff0c;js 策略等配置&＃xff0c;具体内容如下&＃xff1a;

{  // manifest_version版本必须是2 "manifest_version": 2, "version": "1.0.0", "name": "插件名字", "description": "插件功能描述", // 设置插件的图标&＃xff0c;分别是19&＃xff0c;38&＃xff0c;128 "icons": { "19": "assets/icons/icon_19.png", "38": "assets/icons/icon_38.png", "128": "assets/icons/icon_128.png" }, // 后台脚本配置 "background": { "scripts": ["./background.js"] }, // 右上角面板配置项 "browser_action": { "default_popup": "./popup.html" }, // 注入页面脚本基本配置 "content_scripts": [ { // 表示匹配所有地址 "matches": [""], // 多个JS按顺序注入 "js": ["./assets/js/jquery.min.js", "./contentScripts.js"], // 注入到页面时刻&＃xff0c;枚举值有["document_start"|"document_end"|"document_idle"] "run_at": "document_end", // 控制JS文件是否在匹配的Web页面中的所有框架中运行,默认false表示只在顶层框架中运行 "all_frames": true } ], // 注入页面脚本安全配置  "content_security_policy": "script-src &＃39;self&＃39; &＃39;unsafe-eval&＃39; &＃39;self&＃39;", // 插件设置面板配置 "options_ui": { "chrome_style": false, "page": "./options.html" }, // 开发工具扩展配置 "devtools_page": "devtools.html", "homepage_url": "插件中的官网地址URL", // 插件需要的访问权限 "permissions": [ "http://*/*", "https://*/*", "file://*/*", "background", "bookmarks", "clipboardRead", "clipboardWrite", "contentSettings", "COOKIEs", "*://*.google.com/",    "debugger" ], // 设置Web站点页面能够访问插件资源的列表 "web_accessible_resources": [], // 覆盖页面 "chrome_url_overrides": { // 覆盖新tab页面 chrome://history "newtab": "newtab.html", // 覆盖历史记录页面 chrome://newtab "history": "history.html", // 覆盖书签页面chrome://bookmarks "bookmarks": "bookmarks.html" }}2content-scripts脚本

        content-scripts脚本是注入当前web页面中的 js 脚本&＃xff1b;在 manifest.json 中的 content_scripts 节点配置&＃xff1b;它有如下特点&＃xff1a;

• 可以操作站点页面 Dom 结构&＃xff1b;

• 不能访问站点中的 js 脚本&＃xff1b;

• 只能访问部分 Chrome 的 API&＃xff1b;

例如&＃xff1a;

// 页面加载完&＃xff0c;设置页面背景为红色$(window).on(&＃39;load&＃39;, () &＃61;> { $(document.body).css({ background: &＃39;red&＃39;, })})3background脚本

        background脚本是运行在后台的 js 脚本&＃xff1b;在 manifest.json 中的 background 节点配置&＃xff1b;它有如下特点&＃xff1a;

• 生命周期是插件中最长的&＃xff0c;覆盖了插件启动到结束&＃xff1b;

• 除了 devtools 外可以访问大部分 chromeAPI&＃xff1b;

常用于创建页面右键菜单、创建 omnibox 向用户提供搜索建议和抽象公共接口服务等&＃xff1b;

// 创建右键菜单chrome.contextMenus.create({  title: &＃39;京东搜&＃xff1a;%s&＃39;, // %s表示选中的文字 contexts: [&＃39;selection&＃39;], // 只有当选中文字时才会出现此右键菜单  onclick(params) { chrome.tabs.create({      url: &＃96;https://search.jd.com/Search?keyword&＃61;${encodeURIComponent( params.selectionText )}&＃96;, }) },})

效果&＃xff1a;

        browser-action弹框是插件右上角独立操作面板&＃xff1b;在 manifest.json 中的 browser_action 节点配置&＃xff1b;其中 default_popup 入口是 html 文件&＃xff1b;除了 devtools 外可以访问大部分 chromeAPI&＃xff1b;常用于用户交互操作&＃xff0c;如下图&＃xff1a;

官网的关系图&＃xff1a;

        扩展开发者工具&＃xff0c;在 manifest.json 中的 devtools_page 节点配置&＃xff1b;允许开发自定义 Elements、Console、Sources 等同级别的面板&＃xff0c;比如 Vue Devtools 和 React Devtools&＃xff1b;它的生命周期同开发者工具一致的&＃xff1b;并包含了特有的 API 如下&＃xff1a;

// 获取面板相关的APIChrome.devtools.panels// 获取审查窗口信息的APIChrome.devtools.inspectedWindow// 获取网络请求的信息Chrome.devtools.network

例如:

// devtools.jschrome.devtools.panels.elements.createSidebarPane(&＃39;我的面板&＃39;, sidebar &＃61;> {  sidebar.setPage(&＃39;../newpage.html&＃39;); sidebar.setHeight(&＃39;100vh&＃39;);});

// newpage.html   head> 我是新面板 body>html>

效果&＃xff1a;

        options设置面板是插件的用户设置&＃xff0c;在 manifest.json 中的 options_ui 节点配置&＃xff1b;常用于让用户自定义选择想要的功能。

桌面通知

        创建桌面通知&＃xff0c;一般在 background 和 browser_action 中创建&＃xff0c;代码如下&＃xff1a;

chrome.notifications.create({ type: &＃39;basic&＃39;, iconUrl: &＃39;图标地址&＃39;, title: &＃39;这是标题&＃39;, message: &＃39;这是提示内容&＃39;,})

效果&＃xff1a;

工程化

        以 webpack 为例&＃xff0c;使用 webpack 插件 webpack-extension-reloader 实现热加载&＃xff0c;其中热加载服务端口 参数 port&＃xff0c;强加载参数 reloadPage&＃xff0c;入口参数 entries 对应 webpack 的 entry 参数中的 key&＃xff0c;extensionPage 是扩展的入口参数&＃xff1b;

示例如下&＃xff1a;

var ExtensionReloader &＃61; require(&＃39;webpack-extension-reloader&＃39;)new ExtensionReloader({ port: 9090, reloadPage: true, entries: { background: &＃39;background&＃39;, options: &＃39;options&＃39;, popup: &＃39;popup&＃39;, contentScripts: &＃39;contentScripts&＃39;, extensionPage: [], },})

JS权限控制表

消息通信表