谷歌浏览器插件开发 注入|谷歌浏览器插件开发 注入脚本

谷歌浏览器插件（Chrome Extensions）开发中，注入脚本（Content Scripts）是一种在网页内容中运行的JavaScript代码，可以与网页的DOM进行交互。以下是开发一个简单的谷歌浏览器插件并注入脚本的基本步骤：

1. 创建插件目录和文件：

首先，创建一个目录，用于存放插件的所有文件。在目录中创建以下文件：

• manifest.json：插件的配置文件。
• background.js：后台脚本文件（可选）。
• content.js：注入脚本文件。

2. 编写 manifest.json：

在 manifest.json 文件中，定义插件的基本信息、权限和注入脚本。例如：

{
  "manifest_version": 3,
  "name": "My Extension",
  "version": "1.0",
  "permissions": ["activeTab"],
  "action": {
    "default_popup": "popup.html",
    "default_icon": {
      "16": "images/icon16.png",
      "48": "images/icon48.png",
      "128": "images/icon128.png"
    }
  },
  "content_scripts": [
    {
      "matches": ["<all_urls>"],
      "js": ["content.js"]
    }
  ]
}

3. 编写注入脚本（content.js）：

在 content.js 文件中，编写注入到网页中的JavaScript代码。例如，向页面添加一个按钮：

document.body.innerHTML += '<button id="myButton">Click me!</button>';
document.getElementById("myButton").addEventListener("click", function() {
  alert("Button clicked!");
});

4. 加载插件：

在谷歌浏览器中，打开“扩展程序”页面（chrome://extensions/），启用“开发者模式”，然后点击“加载已解压的扩展程序”，选择包含 manifest.json 文件的目录。

5. 测试插件：

访问任意网页，检查是否可以看到注入脚本添加的按钮，并测试其功能。

以上是一个简单的谷歌浏览器插件开发和注入脚本的例子。你可以根据需要添加更多的功能和代码。

• 标签:
• 插件
• 浏览器
• 脚本
• 注入
• 开发