我是如何开发第一个 chrome 插件的
liebian365 2024-11-22 17:14 3 浏览 0 评论
自己摸鱼的时候，看盗版小说发现总是弹出不可描述的广告页面，想着公共场所不合适，有啥办法可以去除广告，总不可能每次都点消除按钮，而 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';"
相关推荐
- 快递查询教程，批量查询物流，一键管理快递
-
作为商家，每天需要查询许许多多的快递单号，面对不同的快递公司，有没有简单一点的物流查询方法呢？小编的回答当然是有的，下面随小编一起来试试这个新技巧。需要哪些工具？安装一个快递批量查询高手快递单号怎么快...
- 一键自动查询所有快递的物流信息 支持圆通、韵达等多家快递
-
对于各位商家来说拥有一个好的快递软件，能够有效的提高自己的工作效率，在管理快递单号的时候都需要对单号进行表格整理，那怎么样能够快速的查询所有单号信息，并自动生成表格呢？1、其实方法很简单，我们不需要一...
- 快递查询单号查询，怎么查物流到哪了
-
输入单号怎么查快递到哪里去了呢？今天小编给大家分享一个新的技巧，它支持多家快递，一次能查询多个单号物流，还可对查询到的物流进行分析、筛选以及导出，下面一起来试试。需要哪些工具?安装一个快递批量查询高手...
- 3分钟查询物流，教你一键批量查询全部物流信息
-
很多朋友在问，如何在短时间内把单号的物流信息查询出来，查询完成后筛选已签收件、筛选未签收件，今天小编就分享一款物流查询神器，感兴趣的朋友接着往下看。第一步，运行【快递批量查询高手】在主界面中点击【添...
- 快递单号查询，一次性查询全部物流信息
-
现在各种快递的查询方式，各有各的好，各有各的劣，总的来说，还是有比较方便的。今天小编就给大家分享一个新的技巧，支持多家快递，一次能查询多个单号的物流，还能对查询到的物流进行分析、筛选以及导出，下面一起...
- 快递查询工具，批量查询多个快递快递单号的物流状态、签收时间
-
最近有朋友在问，怎么快速查询单号的物流信息呢？除了官网，还有没有更简单的方法呢？小编的回答当然是有的，下面一起来看看。需要哪些工具？安装一个快递批量查询高手多个京东的快递单号怎么快速查询？进入快递批量...
- 快递查询软件，自动识别查询快递单号查询方法
-
当你拥有多个快递单号的时候，该如何快速查询物流信息？比如单号没有快递公司时，又该如何自动识别再去查询呢？不知道如何操作的宝贝们，下面随小编一起来试试。需要哪些工具？安装一个快递批量查询高手快递单号若干...
- 教你怎样查询快递查询单号并保存物流信息
-
商家发货，快递揽收后，一般会直接手动复制到官网上一个个查询物流，那么久而久之，就会觉得查询变得特别繁琐，今天小编给大家分享一个新的技巧，下面一起来试试。教程之前，我们来预览一下用快递批量查询高手...
- 简单几步骤查询所有快递物流信息
-
在高峰期订单量大的时候，可能需要一双手当十双手去查询快递物流，但是由于逐一去查询，效率极低，追踪困难。那么今天小编给大家分享一个新的技巧，一次能查询多个快递单号的物流，下面一起来学习一下，希望能给大家...
- 物流单号查询，如何查询快递信息，按最后更新时间搜索需要的单号
-
最近有很多朋友在问，如何通过快递单号查询物流信息，并按最后更新时间搜索出需要的单号呢？下面随小编一起来试试吧。需要哪些工具？安装一个快递批量查询高手快递单号若干怎么快速查询？运行【快递批量查询高手】...
- 连续保存新单号功能解析，导入单号查询并自动识别批量查快递信息
-
快递查询已经成为我们日常生活中不可或缺的一部分。然而，面对海量的快递单号，如何高效、准确地查询每一个快递的物流信息，成为了许多人头疼的问题。幸运的是，随着科技的进步，一款名为“快递批量查询高手”的软件...
- 快递查询教程，快递单号查询，筛选更新量为1的单号
-
最近有很多朋友在问，怎么快速查询快递单号的物流，并筛选出更新量为1的单号呢？今天小编给大家分享一个新方法，一起来试试吧。需要哪些工具？安装一个快递批量查询高手多个快递单号怎么快速查询？运行【快递批量查...
- 掌握批量查询快递动态的技巧，一键查找无信息记录的两种方法解析
-
在快节奏的商业环境中，高效的物流查询是确保业务顺畅运行的关键。作为快递查询达人，我深知时间的宝贵，因此，今天我将向大家介绍一款强大的工具——快递批量查询高手软件。这款软件能够帮助你批量查询快递动态，一...
- 从复杂到简单的单号查询，一键清除单号中的符号并批量查快递信息
-
在繁忙的商务与日常生活中，快递查询已成为不可或缺的一环。然而，面对海量的单号，逐一查询不仅耗时费力，还容易出错。现在，有了快递批量查询高手软件，一切变得简单明了。只需一键，即可搞定单号查询，一键处理单...
- 物流单号查询，在哪里查询快递
-
如果在快递单号多的情况，你还在一个个复制粘贴到官网上手动查询，是一件非常麻烦的事情。于是乎今天小编给大家分享一个新的技巧，下面一起来试试。需要哪些工具？安装一个快递批量查询高手快递单号怎么快速查询？...
欢迎 你 发表评论:
- 一周热门
- 最近发表
- 标签列表
-
- wireshark怎么抓包 (75)
- qt sleep (64)
- cs1.6指令代码大全 (55)
- factory-method (60)
- sqlite3_bind_blob (52)
- hibernate update (63)
- c++ base64 (70)
- nc 命令 (52)
- wm_close (51)
- epollin (51)
- sqlca.sqlcode (57)
- lua ipairs (60)
- tv_usec (64)
- 命令行进入文件夹 (53)
- postgresql array (57)
- statfs函数 (57)
- .project文件 (54)
- lua require (56)
- for_each (67)
- c#工厂模式 (57)
- wxsqlite3 (66)
- dmesg -c (58)
- fopen参数 (53)
- tar -zxvf -c (55)
- 速递查询 (52)