【学习】【03】谷歌浏览器插件 - 动态注入脚本

[晴小篆]

不需要有开发经验， 但是有一定的浏览器插件的概念。 基本入门概念可以参考： 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 隐藏了。

浏览器里面加载你的插件

1. 在浏览器中访问 chrome://extensions/ , 或者 访问[浏览器设置] --> [扩展程序] --> [管理扩展程序]

2. 点击开发者模式旁边的切换开关以启用开发者模式。
3. 点击 Load unpacked（加载解压缩）按钮，然后选择扩展程序目录。
   

然后你就可以用上你的插件了。