一、前言
谷歌插件拓展程序地址：
chrome://extensions/
广东靓仔之前写过几个谷歌插件，有的是用来提高自己日常项目的开发效率、有的是用来对网站的文章进行规整方便查看，等等
在市场上我们可以看到很多谷歌插件，广东靓仔找了几个常见的，如下：
这些插件之所以使用的用户多，是因为它都能帮我们省时间，快速定位问题、解决问题。
下面我们讲解如何编写属于我们自己的谷歌插件。
二、谷歌插件模版
广东靓仔给小伙伴们推荐两个浏览器插件的模版地址：
对谷歌插件如何开发已经很熟悉的小伙伴可以直接使用这两个模版，提高开发插件效率。
前者可以在Chrome, Opera & Firefox使用
后者是使用vue3语法，使用vite构建，速度会快一点点。
三、谷歌插件开发、发布流程
在开始讲解具体内容前，我们有必要先了解下谷歌插件的开发流程：
开发语言，是我们熟悉的JavaScript，一个完整的谷歌插件是由4个部分组成：
- manifest.json：义插件的属性，例如名称、版本、类型等，（后面我们会详细讲解）
- .js文件：与浏览器互动的脚本
- 图标：用来在浏览器显示
- HTML文件：实现插件的功能
当我们完成谷歌插件编写后，把编写好的文件放到同一个文件夹中，然后在谷歌浏览器的工具栏中选择“扩展程序”，进入扩展管理页，在右侧选择“开发人员模式”，再点击“载入正在开发的扩展程序”按钮，定位到这个文件夹，将整个文件夹载入Chrome中。
如下所示：
到这里我们已经在本机完成了谷歌插件的搭建，如果想把自己的谷歌推广给其他用户使用，我们需要把我们的谷歌插件进行发布，流程如下：
1、注册Google 帐号，然后登录网上应用商店
2、添加一个新项，如下所示：
3、用zip文件的形式上传文件（我们的插件压缩的时候记得选ZIP，不要选了其他类型）
4、最后选择发布就可以了，如下所示：
整体的一个流程如上所示，下面我们进行具体内容的讲解。
四、开发自己的第一个谷歌插件
广东靓仔觉得最重要的第一步，是设计一个好的图标，好的图标让使用者有一种专业的felling。一般设计两个不同尺寸的图标：
- 显示在地址栏右侧：19×19像素
- 显示在扩展管理页：48×48像素的图标
manifest.json
用来定义插件的属性，这个文件格式比较固定，我们根据自己需要进行更改就可以了，下面例举了3个配置文件：
简单的配置文件：
{ "name": "广东靓仔的demo谷歌插件"， "version": "1.0"， "description": "这是我们搭建的谷歌插件描述"， "icons": { "48": "icon48.png" }， // 定义图片的大小，可以自己更改 "page_action": { "default_icon": "icon19.png" }，// 定义图片的名称，可以自己更改 "background_page": "background.html"，// 定义HTML名称，可以自己更改 "permissions": [ "tabs" ]， "content_scripts": [{ "matches": ["http://*.google.com/*"]， "js": ["visit.js"]// 定义.js文件名称，可以自己更改 }] }
稍微齐全点的配置文件：
{ // 清单文件的版本，这个必须写，而且必须是2 "manifest_version": 2, // 插件的名称 "name": "demo", // 插件的版本 "version": "1.0.0", // 插件描述 "description": "简单的Chrome扩展demo", // 图标，一般偷懒全部用一个尺寸的也没问题 "icons": { "16": "img/icon.png", "48": "img/icon.png", "128": "img/icon.png" }, // 会一直常驻的后台JS或后台页面 "background": { // 2种指定方式，如果指定JS，那么会自动生成一个背景页 "page": "background.html" //"scripts": ["js/background.js"] }, // 浏览器右上角图标设置，browser_action、page_action、app必须三选一 "browser_action": { "default_icon": "img/icon.png", // 图标悬停时的标题，可选 "default_title": "这是一个示例Chrome插件", "default_popup": "popup.html" }, // 当某些特定页面打开才显示的图标 /*"page_action": { "default_icon": "img/icon.png", "default_title": "我是pageAction", "default_popup": "popup.html" },*/ // 需要直接注入页面的JS "content_scripts": [ { //"matches": ["http://*/*", "https://*/*"], // "<all_urls>" 表示匹配所有地址 "matches": ["<all_urls>"], // 多个JS按顺序注入 "js": ["js/jquery-1.8.3.js", "js/content-script.js"], // JS的注入可以随便一点，但是CSS的注意就要千万小心了，因为一不小心就可能影响全局样式 "css": ["css/custom.css"], // 代码注入的时间，可选值： "document_start", "document_end", or "document_idle"，最后一个表示页面空闲时，默认document_idle "run_at": "document_start" }, // 这里仅仅是为了演示content-script可以配置多个规则 { "matches": ["*://*/*.png", "*://*/*.jpg", "*://*/*.gif", "*://*/*.bmp"], "js": ["js/show-image-content-size.js"] } ], // 权限申请 "permissions": [ "contextMenus", // 右键菜单 "tabs", // 标签 "notifications", // 通知 "webRequest", // web请求 "webRequestBlocking", "storage", // 插件本地存储 "http://*/*", // 可以通过executeScript或者insertCSS访问的网站 "https://*/*" // 可以通过executeScript或者insertCSS访问的网站 ], // 普通页面能够直接访问的插件资源列表，如果不设置是无法直接访问的 "web_accessible_resources": ["js/inject.js"], // 插件主页，这个很重要，不要浪费了这个免费广告位 "homepage_url": "https://www.baidu.com", // 覆盖浏览器默认页面 "chrome_url_overrides": { // 覆盖浏览器默认的新标签页 "newtab": "newtab.html" }, // Chrome40以前的插件配置页写法 "options_page": "options.html", // Chrome40以后的插件配置页写法，如果2个都写，新版Chrome只认后面这一个 "options_ui": { "page": "options.html", // 添加一些默认的样式，推荐使用 "chrome_style": true }, // 向地址栏注册一个关键字以提供搜索建议，只能设置一个关键字 "omnibox": { "keyword" : "go" }, // 默认语言 "default_locale": "zh_CN", // devtools页面入口，注意只能指向一个HTML文件，不能是JS文件 "devtools_page": "devtools.html" }
完整的配置文档地址：https://developer.chrome.com/extensions/manifest
重要字段具体解析：
content-scripts：这是我们在Chrome插件中向页面注入脚本的一种形式，当然这里还可以是css。借助content-scripts我们可以实现向指定页面注入JS和CSS（也可以动态注入），最常见的比如：广告屏蔽、页面CSS定制，等等
稍微注意下：如果没有主动指定run_at为document_start（默认为document_idle），一般document.addEventListener('DOMContentLoaded', () => {})，是不会执行的。
content-scripts和原始页面共享DOM，但是不共享JS，如要访问页面JS（例如某个JS变量），只能通过injected js来实现。content-scripts不能访问绝大部分chrome.xxx.api，除了下面这4种：
- chrome.extension(getURL , inIncognitoContext , lastError , onRequest , sendRequest)
- chrome.i18n
- chrome.runtime(connect , getManifest , getURL , id , onConnect , onMessage , sendMessage)
- chrome.storage
background的权限非常高，几乎可以调用所有的Chrome扩展API（除了devtools），而且它可以无限制跨域，也就是可以跨域访问任何网站而无需要求对方设置cors。
popup 是我们的图标进入焦点时，显示的弹框
injected-script 通过DOM操作的方式向页面注入的一种JS，广东靓仔用这个比较多，content-script存在一些不足：（content-script无法访问页面中的JS，虽然它可以操作DOM，但是DOM却不能调用它。比如：onclick和addEventListener无法使用）
我们可以这样使用，在content-script通过DOM方式向页面注入inject-script代码。示例如下：
第一步，配置文件中加如下代码：
{ // 普通页面能够直接访问的插件资源列表，如果不设置是无法直接访问的 "web_accessible_resources": ["js/inject.js"], }
第二步，向页面注入js：
// 在页面中注入JS function injectCustomJs(jsPath) { jsPath = jsPath || 'js/inject.js'; var temp = document.createElement('script'); temp.setAttribute('type', 'text/javascript'); temp.src = chrome.extension.getURL(jsPath); temp.onload = function() { // 执行完后移除掉 this.parentNode.removeChild(this); }; document.head.appendChild(temp); }
动态执行js代码方式如下：
// 动态执行JS代码 chrome.tabs.executeScript(tabId, {code: 'document.body.style.backgroundColor="red"'}); // 动态执行JS文件 chrome.tabs.executeScript(tabId, {file: 'some-script.js'});
override 我们可以覆盖一些制定页面，将Chrome默认的一些特定页面替换掉，改为使用扩展提供的页面。
比如：
- 历史记录：从工具菜单上点击历史记录时访问的页面，或者从地址栏直接输入 chrome://history
- 新标签页：当创建新标签的时候访问的页面，或者从地址栏直接输入 chrome://newtab
- 书签：浏览器的书签，或者直接输入 chrome://bookmarks
我们可以把这些替换成我们想要的页面，比如新开Tab，我们可以替换成“一些新闻”，看点咨询等等。
devtools扩展
<!DOCTYPE html> <html> <head></head> <body> <script type="text/javascript" src="js/devtools.js"></script> </body> </html>
本地存储建议使用：chrome.storage
多语言 插件根目录新建一个名为_locales的文件夹，再在下面新建一些语言的文件夹，如en、zh_CN、zh_TW，然后再在每个文件夹放入一个messages.json，同时必须在清单文件中设置default_locale。
.js文件
.js文件文件是连接浏览器和插件的桥梁，最基本的代码就是：chrome.extension.sendRequest();
常用用的一些API如下：
- chrome.tabs
- chrome.runtime
- chrome.webRequest
- chrome.window
- chrome.storage
- chrome.contextMenus
- chrome.devtools
- chrome.extension
五、总结
我们掌握了谷歌插件开发以及发布流程，之后我们可以尝试编写属于我们自己的插件。
