浏览器插件

边洛洛

已于 2025-07-22 00:16:12 修改

阅读量242

点赞数 3

CC 4.0 BY-SA版权

分类专栏：前端文章标签：前端 javascript html

于 2025-06-23 14:26:03 首次发布

本文链接：https://blog.csdn.net/qq_45854695/article/details/148843415

前端专栏收录该内容

19 篇文章

订阅专栏

记录第一次写一个浏览器插件，实现了在TikTok Shop 商品机会的自动提报

首先明确一个插件的代码结构

my-extension/
├── manifest.json         // 插件的“配置文件”
├── background.js         // 后台监听器，如处理事件、定时器等
├── content.js            // 页用于操作页面dom
├── popup.html            // 插件点击后弹出的窗口
├── popup.js              // popup 的 JS 逻辑
├── icon.png              // 插件图标

如何测试

1. 打开chrome浏览器

2. 进入chrome://extensions/

3.勾选右上角的“开发者模式”

4. 点击“加载已解压的扩展程序”

5. 选择插件目录 my-extension

manifest.json

{
  "manifest_version": 3,
  "name": "Felix商品提报助手",
  "version": "1.0",
  "description": "自动提报 TikTok Shop 商品机会的 Chrome 插件",
  "permissions": [
    "activeTab",
    "tabs",
    "scripting",
    "storage"
  ],
  "host_permissions": [
    "<all_urls>"
  ],
  "action": {
    "default_popup": "popup.html",
    "default_icon": {
      "16": "images/icon16.png",
      "48": "images/icon48.png",
      "128": "images/icon128.png"
    }
  },
  "icons": {
    "16": "images/icon16.png",
    "48": "images/icon48.png",
    "128": "images/icon128.png"
  },
  "background": {
    "service_worker": "background.js",
    "type": "module"
  },
  "content_scripts": [
    {  
      "matches": ["<all_urls>"],
      "js": ["content.js"],
      "run_at": "document_idle"
    }
  ]
}

具体代码放D盘project了（提醒自己）

这是一个已投入实际使用的插件，而非demo。如有需要者，私信... (有偿，介意误私)