共计 5601 个字符,预计需要花费 15 分钟才能阅读完成。
本人摸鱼的时候,看盗版小说???? 发现总是弹出不可形容的广告页面,想着公共场所不适合,有啥方法能够去除广告,总不可能每次都点打消按钮,而 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';"
欢送关注【前端学啥】一起交换