本人摸鱼的时候，看盗版小说????发现总是弹出不可形容的广告页面，想着公共场所不适合，有啥方法能够去除广告，总不可能每次都点打消按钮，而 chorme 浏览器插件能够完满的实现这个小需要。
次要构造
chorme 浏览器插件次要就是由几个重要的文件组成：
上图其实就是这个插件，咱们能够看到其实 chorme 浏览器插件就是个页面，咱们前端上手齐全没有压力，而最重要的就是这个 manifest.json 文件。它是整个插件的配置
{ // 清单文件的版本，这个必须写，而且必须是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", "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, // 默认值为false，示意以嵌入形式关上options页面；true示意在新的tab中关上options页面 "open_in_tab": true }, // 向地址栏注册一个关键字以提供搜寻倡议，只能设置一个关键字 "omnibox": { "keyword" : "go" }, // 默认语言 "default_locale": "zh_CN", // devtools页面入口，留神只能指向一个HTML文件，不能是JS文件 "devtools_page": "devtools.html"}下面是 manifest.json 的一些配置信息，如果须要具体的配置信息能够查看 developer.chrome.com。但以后开发前文需要的插件时，齐全不须要这么多配置信息：
{ "manifest_version": 2, "name": "book_crx", "version": "1.0.0", "description": "简略的 Chrome 扩大在线浏览小说去掉广告", "icons": { "16": "img/icon.png", "48": "img/icon.png", "128": "img/icon.png" }, "background": { "scripts": ["js/main.js"] }, "content_scripts": [ { "matches": ["http://m.biqu6.cc/*"] // 对应的小说网站 } ]}新建一个插件目录 book_ad，对应配置信息新建文件
而 main.js 就是执行代码逻辑的文件了，再次梳理需要：去掉网站中的广告，因为这里是小说网站，所以我抉择粗犷的间接去掉了页面中所有的 img 元素，代码也简略
document.addEventListener('DOMContentLoaded', function() { console.log('我被执行了！'); Array.from(document.querySelectorAll('img')).forEach(ele => { ele.remove(); })});装置
开发实现后，就是装置问题了：点击 chrome 右上角三个点 -> 更多工具 -> 扩大程序 或者 间接拜访 chrome://extensions/ 地址
开启开发者模式后能够看到呈现三个按钮选项
点击【加载已解压扩大程序】间接加载 book_ad 目录
而后咱们就能够看看成果啦
原谅我不能放成果，会被河*蟹
这下摸鱼能够不受广告困扰了。
options 选项
下面实现了一个根本的插件，然而这个只能在一个小说网站下面能够应用咱们的插件，如果摸鱼摸到其余盗版小说网站时又没用了，因为以后只配置了一个网站
"content_scripts": [ { "matches": ["http://m.biqu6.cc/*"] } ]咱们能够配置选项页面，来动静的配置多个网站，须要在 manifest.json 文件中配置 options.html 页面
"options_page": "options.html","options_ui": { "page": "options.html", "chrome_style": true, "open_in_tab": true},再在根目录新建 options.html
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>options</title></head><body> <h1>options</h1> <input id="input" type="text" placeholder="输出网站"> <button id="btn">增加</button> <script src="js/options.js"></script></body></html>而后在 chrome://extensions/ 地址中找到插件，点击刷新；点击浏览器右侧扩大程序图标能够看到【选项】，点击可跳到咱们本人写的 options.html 页面
新建 options.js
;(function(window, document){ const S_KEY = '__book_ad__'; document.querySelector('#btn').onclick = function() { const val = document.querySelectorAll('input')[0].value console.log(val) // 获取 background 端 const page = chrome.extension.getBackgroundPage() page.getStore(S_KEY).then(site => { console.log(site) if (Array.isArray(site)) { site.push(val); page.setStore(S_KEY, site); alert('增加胜利!') } else { page.setStore(S_KEY, [val]); alert('增加胜利!') } }) }})(window, document)content_scripts
content_scripts 选项是内容脚本，当配置页面加载时执行的脚本，这里把逻辑都移到 content_scripts.js 中，先要配置 manifest.json
"content_scripts": [ { "matches": ["<all_urls>"], "js": [ "js/content_scripts.js" ], "run_at": "document_end" }],新建 content_scripts.js
console.log('我被执行了！');// clearStore()getStore('__book_ad__').then(sites => { console.log(sites); if (!Array.isArray(sites)) return; sites.forEach(site => { if (location.href.includes(site)) { main(); } })})function main() { const $imgs = document.querySelectorAll('img'); const $bingo = document.querySelectorAll('bingo'); const $object = document.querySelectorAll('object'); Array.from($imgs).forEach(ele => { ele.remove(); }) Array.from($bingo).forEach(ele => { ele.remove(); }) Array.from($object).forEach(ele => { ele.remove(); })}function setStore(key, value) { return new Promise(resolve => chrome.storage.local.set({ [key]: value }, resolve) );}function getStore(key) { return new Promise(resolve => { chrome.storage.local.get(key, item => resolve(item[key])); });}function clearStore() { return new Promise(resolve => { chrome.storage.local.clear(() => resolve()); });}这里咱们应用 chrome.store 来存储网址配置，应用这个选项须要在 manifest.json 文件中配置权限
"permissions": [ "storage" ]留神：chrome.storage 中存储的数据，在开发者调式工具中看不到，这里我就应用代码清理数据了。
打包
点击 【打包扩大程序】按钮
选中目录打包生成 .crx 文件，不过它须要公布到谷歌利用上能力应用
总结
插件只是一个简略的应用，外面还有更多的粗疏的知识点能够帮忙插件实现更多的性能。这次又是在本人生存中，发现需要点应用技术来解决。本人前面也应用 vue 尝试从新构建了一次，源码在此。
留神：
应用 CDN 时，加载程序会弹出如下谬误
须要在 manifest.json 增加字段
"content_security_policy": "style-src 'self' 'unsafe-inline' https://cdn.jsdelivr.net; script-src 'self' 'unsafe-eval' https://cdn.jsdelivr.net; object-src 'self';"欢送关注【前端学啥】一起交换