【学习】【03】谷歌浏览器插件 - 动态注入脚本
yanlele opened this issue · comments
不需要有开发经验, 但是有一定的浏览器插件的概念。 基本入门概念可以参考: https://juejin.cn/post/7362046148708679715
实现非常简单,只需要最基础的 css、js 概念就可以。
先建立一个 manifest.json 文件
{
"manifest_version": 3,
"name": "Hello Extensions of the world",
"description": "hello world",
"version": "1.0",
"action": {
"default_icon": "images/icon.png"
},
"icons": {
"16": "images/icon.png",
"32": "images/icon.png",
"48": "images/icon.png",
"128": "images/icon.png"
},
"background": {
"service_worker": "background/index.js"
},
"permissions": ["activeTab", "scripting"]
}
对上面配置做一下简单的说明:
配置项 | 类型 | 说明 |
---|---|---|
"manifest_version" |
Number | 指定清单文件的版本,这里使用的是 Manifest V3(数字 3)。 |
"name" |
String | 扩展程序的名称,将显示在浏览器扩展页面上看到的名字。 |
"description" |
String | 扩展程序的简短说明,通常在市场页面或安装时的描述中显示。 |
"version" |
String | 扩展程序的版本号。 |
"action" |
Object | 用户点击扩展图标时的动作配置。 |
"action" > "default_icon" |
String | 默认图标的路径。 |
"icons" |
Object | 不同尺寸的图标路径,用于扩展的各个界面。 |
"background" |
Object | 指定后台服务工作线程(service worker)文件的配置。 |
"background" > "service_worker" |
String | 后台服务工作线程的 JavaScript 文件路径。 |
"permissions" |
Array | 扩展所需的浏览器功能权限列表。 |
脚本文件
在 background
目录下, 新建 index.js
文件。 代码如下
// chrome.runtime.onInstalled 扩展程序加载的时候
chrome.runtime.onInstalled.addListener((tab) => {
// 设置扩展程序徽标, 没有实际的功能性能理
chrome.action.setBadgeText({
text: "OFF",
});
});
// 点击插件图标
chrome.action.onClicked.addListener(async (tab) => {
const prevState = await chrome.action.getBadgeText({ tabId: tab.id });
const nextState = prevState === "ON" ? "OFF" : "ON";
// 切换徽标描述文本
await chrome.action.setBadgeText({
tabId: tab.id,
text: nextState,
});
if (nextState === "ON") {
// 插入 css
await chrome.scripting.insertCSS({
files: ["background/focus-mode.css"],
target: { tabId: tab.id as number },
});
} else if (nextState === "OFF") {
// 移除 css
await chrome.scripting.removeCSS({
files: ["background/focus-mode.css"],
target: { tabId: tab.id as number },
});
}
});
这个里面有加载了 css 文件, css 文件是动态加载的。 也就是说, 当我们插件开关开启的时候, 加载一些 css , 开关关起来的时候移除加载的 css.
css 代码如下
.article-area {
width: 100% !important;
}
.main-header-box,
.article-suspended-panel,
#sidebar-container,
.global-component-box {
display: none !important;
}
就这些代码, 然后就可以 run 起来了。 本质上就是将 header、siderbar 等样式文件, 直接给 display none
隐藏了。
浏览器里面加载你的插件
- 在浏览器中访问
chrome://extensions/
, 或者 访问[浏览器设置] --> [扩展程序] --> [管理扩展程序]
然后你就可以用上你的插件了。