如何通过js写一个chrome插件。

---

highlight: a11y-dark

严格来讲，我们正在说的东西应该叫Chrome扩展(Chrome Extension)，真正意义上的Chrome插件是更底层的浏览器功能扩展，可能需要对浏览器源码有一定掌握才有能力去开发。鉴于Chrome插件的叫法已经习惯，本文也全部采用这种叫法，但读者需深知本文所描述的Chrome插件实际上指的是Chrome扩展。

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

通过chrome插件可以做什么？

• 书签控制；
• 下载控制；
• 窗口控制；
• 标签控制；
• 网络请求控制，各类事件监听；
• 自定义原生菜单；
• 完善的通信机制；
• 等等；

开发一个简单的Hello world

创建一个文件，文件名字随便，建议英文，然后创建一个manifest.json文件，切记这个为核心，然后写入基本的配置 { "name": "component", "manifest_version": 2, "version": "1.0", "description": "component", "browser_action": { "default_icon": "img/favicon.png" //这个是你的插件图标。 }, "omnibox": { "keyword": "aString" }, "content_scripts": [ { "matches": [ "https://ch.one-line.com/*" //这个是你需要在那个页面显示Hello word ], "js": [ "script.js" //这个是需要载入的js文件，可以在这个文件里面书写你需要的逻辑，我们只写Hello word ] } ] } 其次创建一个js文件，我创建的是script.js文件。然后在script.js文件里面写入 ``` window.onload = function () {

alert('Hello world')

} ```

怎么去写一个chrome插件，并且执行你这个插件呢？

从右上角菜单->更多工具->扩展程序可以进入 插件管理页面，也可以直接在地址栏输入 chrome://extensions 访问。

勾选开发者模式即可以文件夹的形式直接加载插件，

点击右上角加载已解压扩展程序，将自己刚才的文件加载进来。

开发中，代码有任何改动都必须重新加载插件，只需要在插件管理页按下Ctrl+R即可，以防万一最好还把页面刷新一下。

然后打开刚才需要显示Hello word的网页，页面就会弹出Hello word。

当然我们写了一个插件不可能只做这一点事情，可以去做很多事情的，接下来，我们尝试着去请求这个网页中的某个接口。。。

使用插件请求网页接口

我们打开需要请求网页的控制台，看一下，人家网络的请求是一个什么样子的 ，需要分析一下能否拿到请求参数。

我们看到这个页面有两个输入框，尝试输入找到对应的接口

输入YAN就在控制台看到了如上图所示的接口，然后我开始在script.js文件里面开始写一个请求 let tokenData = JSON.parse(window.sessionStorage.getItem('ember_simple_auth-session')) //亲求需要token验证，所以我们需要拿到token. let ajax = new XMLHttpRequest(); ajax.open('get', `https://cetusapi-prod.kontainers.io/trip-ui/api/v1/customer/locations?from=&fromCountry=&loadType=fcl&query=YAN`); //这个地方就是我们需要的接口。 ajax.setRequestHeader("token", tokenData.authenticated.token); //加入我们获取到的token验证。 ajax.send(); ajax.onreadystatechange = function () { if (ajax.readyState === 4 && ajax.status === 200) { console.log(JSON.parse(ajax.responseText) ) // 这个就是我门获取到的信息。 } } 这个就是我门拿到的结果。

然后到这一步就完了。有兴趣的小伙伴可以在深入研究一下 ，至于想做什么，自己研究哈。

最后附上一些关键的配置哦 { // 清单文件的版本，这个必须写，而且必须是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" }