Chrome 扩展开发入门

前端还能拯救一下

已于 2025-01-16 17:42:51 修改

阅读量917

点赞数 22

分类专栏：工具文章标签： chrome 前端 javascript 学习 html5

于 2025-01-16 17:28:35 首次发布

本文链接：https://blog.csdn.net/giu056/article/details/145187768

版权

工具专栏收录该内容

4 篇文章

订阅专栏

Chrome 扩展开发入门

最近学习 Chrome 扩展开发，自己弄脚本实现一些简单的机械化小功能

文件结构

首先看一下文件结构，Chrome扩展的文件结构也是manifest.json核心配置的体现，以下这个简单的 demo 最要分为三部分：

backgournd.js ：扩展加载时启动（打开浏览器或安装扩展），并持续运行，直到被禁用或关闭浏览器。
content.js : 网页加载完成后执行，比如开启一个新 tab 页面。
popup.js ：当点开扩展图标时弹出窗口打开时执行。

大概就是分三分部，我的理解是：backgournd 负责 Chrome 底层一些数据的持久化和 Chrome 事件的交互，content 负责单个打开的网页的交互，popup 负责扩展窗口的交互。

├── background.js  // 后台运行的js
├── content.js     // 页面执行的js
├── data.txt
├── images
│   ├── 128.png
│   ├── 16.png
│   ├── 48.png
│   ├── didi.jpg
│   └── facai.jpg
├── manifest.json
├── popup.html     // 扩展窗口页面
└── popup.js       // 扩展窗口页面展开时执行的js

再来看看 manifest.json 的配置内容：

action：负责 popup，扩展窗口的配置，包含弹窗的图标和对应的dom页面文件
content_scripts：对应网页的 js 执行文件，可以直接注入控制网页，可能在网页被挂起时释放
background：是后台持久化执行或者监听事件

icons：配置插件窗口的图标
permissions：用于设置该扩展可以拥有哪些功能权限
web_accessible_resources：用于配置该插件可以读取的资源文件
每一个配置分类里还有子配置，如 content_scripts 可以配置 matches 适用的网址有哪些什么

{
  "manifest_version": 3,
  "name": "AutoBulletComments",
  "version": "1.0",
  "description": "这是一个示例",
  "permissions": ["activeTab", "storage"],
  "action": {
    "default_popup": "popup.html",
    "default_icon": {
      "16": "images/16.png",
      "48": "images/48.png",
      "128": "images/128.png"
    }
  },
  "content_scripts": [
    {
      "matches": ["<all_urls>"],
      "js": ["content.js"]
    }
  ],
  "background": {
    "service_worker": "background.js"
  },
  "icons": {
    "16": "images/16.png",
    "48": "images/48.png",
    "128": "images/128.png"
  },
  "web_accessible_resources": [
    {
      "resources": ["data.txt"],
      "matches": ["<all_urls>"]
    }
  ]
}

通信

既然分了三个处理模块各种控制弹窗、页面、后台三块，这三之间数据有交互怎么办？可以通过消息传递机制实现，一般使用： chrome.runtime.sendMessage、chrome.runtime.onMessage.addListener。
例如：

发送消息

// popup.js 、content.js 、background.js
chrome.runtime.sendMessage({ action: "sendMessage" });

接收消息

// popup.js 、content.js 、background.js
chrome.runtime.onMessage.addListener(function (request, sender, sendResponse) {
  if (request.action === "sendMessage") {
    // 接收消息
    console.log("message");
  }
});

通常情况下：

popup.js 发送消息到 background.js，
background.js 接收消息，并可以选择将其转发给 content.js，
content.js 接收来自 background.js 的消息。

popup.js 与 content.js 的消息通信一般由 background.js 转发，如果 content.js 与 popup.js 存在共同的上下文，即：扩展窗口在当前活动页签打开，也可以直接通过 chrome.runtime.onMessage 与 chrome.runtime.sendMessage 建立通信。

共同上下文时，content.js 与 popup.js 互相通信

content.js 发送消息

// content.js
// 发送消息
chrome.runtime.sendMessage({ action: "sendContentData" });
// 接收消息
chrome.runtime.onMessage.addListener((request, sender, sendResponse) => {
  if (request.action === "sendPopupData") {
    console.log("the popup data");
  }
});

popup.js 接收消息并向指定的 content.js 通过chrome.tabs.sendMessage发送消息

// popup.js
chrome.runtime.onMessage.addListener(function (request, sender, sendResponse) {
  if (request.action === "sendContentData") {
    // 查询当前活动标签页
    chrome.tabs.query({ active: true, currentWindow: true }, function (tabs) {
      // 向 当前页面 content.js 发送消息
      chrome.tabs.sendMessage(tabs[0].id, { action: "sendPopupData" });
    });
  }
});

文件读取

本示例中包含了读取文件 data.txt
在 content.js 中读取文件首先需要在 manifest.json 中配置对该文件的读取权限，增加如下配置

"web_accessible_resources": [
  {
    "resources": ["data.txt"],
    "matches": ["<all_urls>"]
  }
]

然后content.js中读取文件

// content.js
async function fetchTextFile() {
  const url = chrome.runtime.getURL("data.txt");
  console.log("Fetching from:", url); // 打印要获取的 URL
  try {
    const response = await fetch(url);
    if (!response.ok) {
      throw new Error(`HTTP error! status: ${response.status}`);
    }
    const text = await response.text();
    return text;
  } catch (error) {
    console.error("Failed to fetch the file:", error);
  }
}

async function getTextData() {
  const textData = await fetchTextFile();
  // 将文本按行分隔，去除空白行
  const lines = textData
    .split("\n")
    .map((line) => line.trim())
    .filter((line) => line);

  return lines;
}

getTextData()