【Chrome】开发一个Chrome扩展以及常见问题的解决方案

最新推荐文章于 2025-01-16 17:28:35 发布

田本初

最新推荐文章于 2025-01-16 17:28:35 发布

阅读量1.8k

点赞数 34

分类专栏：面试题 Chrome 文章标签： chrome 数据库前端

本文链接：https://blog.csdn.net/owo_ovo/article/details/142438480

版权

前言

本文介绍开发chrome扩展很重要的几种操作，如：操作网页dom、发送请求、渲染弹层、不同沙盒环境的通信方式、扩展与网页的通信方式、遇到iframe时的操作等。最终会提供一个简单的案例，其中涵盖了上述操作。

还有一些本人相关文章，有兴趣也可以看一下，如：判断是否安装了某个Chrome插件、background.js中log打印未出现在控制台、Edge扩展程序上架流程、Chrome扩展程序上架流程。

本文都是在该页面下测试扩展

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <script>
    localStorage.setItem("tag", "123456") // 标识是否需要执行插件
  </script>
</head>

<body>
  <input id="test-chrome-extensions" type="text">
</body>

</html>

需要一个标识用于确认是否需要在该页面下运行扩展，本文以本地存储举例，也可能是下面几种方式，需要根据实际场景判断使用。
- 根据域名判断，可以通过扩展的 manifest.json 中 content_scripts 的 matches 字段来定义允许执行的页面（下文会提及）。
- 根据url路径参数
- 根据页面中的特殊标签
- 根据本地存储
- …
需要一个input输入框用于测试扩展对网页dom元素的直接操作

一、目录结构

开发一个Chrome扩展，项目目录大致如下，下文统一以标准命名介绍。

在这里插入图片描述

background.js：后台脚本
content.js：内容脚本
manifest.json：插件配置文件（清单列表）
popup.html 和 popup.js：插件弹窗页面及其脚本

二、配置清单（manifest.json）

该文件必须位于项目的根目录下。
必需的键只有 “manifest_version”、“name” 和 “version”。
开发过程中支持注释 (//)，但在将代码上传到 Chrome 应用商店之前，必须先移除这些注释。

基本配置如下

{
   
  "manifest_version": 3,
  "name": "My Chrome Extension",
  "version": "1.0",
  "permissions": ["storage", "activeTab", "scripting"],
  "background": {
   
    "service_worker": "background.js"
  },
  "action": {
   
    "default_popup": "popup.html"
  },
  "content_scripts": [
    {
   
      "matches": ["<all_urls>"],
      "js": ["content.js"]
    }
  ]
}