一、前言 谷歌插件拓展程序地址： chrome://extensions/     广东靓仔之前写过几个谷歌插件，有的是用来提高自己日常项目的开发效率、有的是用来对网站的文章进行规整方便查看，等等     在市场上我们可以看到很多谷歌插件，广东靓仔找了几个常见的，如下：     这些插件之所以使用的用户多，是因为它都能帮我们省时间，快速定位问题、解决问题。     下面我们讲解如何编写属于我们自己的谷歌插件。 二、谷歌插件模版 广东靓仔给小伙伴们推荐两个浏览器插件的模版地址： https://github.com/EmailThis/extension-boilerplate https://github.com/antfu/vitesse-webext   对谷歌插件如何开发已经很熟悉的小伙伴可以直接使用这两个模版，提高开发插件效率。       前者可以在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://*/*"],             // "" 表示匹配所有地址             "matches": [""],             // 多个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扩展      本地存储建议使用：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 五、总结     我们掌握了谷歌插件开发以及发布流程，之后我们可以尝试编写属于我们自己的插件。