不需要有开发经验， 但是有一定的浏览器插件的概念。 基本入门概念可以参考： juejin.cn/post/736204…
实现非常简单，只需要最基础的 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/, 或者 访问[浏览器设置] --> [扩展程序] --> [管理扩展程序]
- 点击开发者模式旁边的切换开关以启用开发者模式。
- 点击 Load unpacked（加载解压缩）按钮，然后选择扩展程序目录。
然后你就可以用上你的插件了。
