Chrome 扩展代码 vs 内容脚本 vs 注入脚本

js Chrome

1个回答

写回答

许金鱼

2025-07-08 10:50

+ 关注

Chrome
Chrome

Chrome 扩展代码 vs 内容脚本 vs 注入脚本

Chrome 扩展是一种强大的工具，可以为浏览器添加额外的功能和定制化选项。在开发一个 Chrome 扩展时，我们常常需要使用到代码来实现各种功能。本文将介绍 Chrome 扩展中的三种常见代码类型：扩展代码、内容脚本和注入脚本，并通过案例代码来说明它们的应用场景和区别。

扩展代码

扩展代码是 Chrome 扩展的核心代码，它主要用于定义扩展的行为和功能。扩展代码通常包含一个清单文件（manifest.JSon），用于声明扩展的基本信息和权限要求。在清单文件中，我们可以指定扩展的名称、图标、版本号、所需权限等。

除了清单文件外，扩展代码还可以包含一些 JavaScript 文件，用于处理与浏览器交互的逻辑。这些 JavaScript 文件可以监听浏览器事件，例如页面加载完成、用户点击链接等，从而执行相应的操作。扩展代码还可以通过 Chrome API 来访问浏览器的各种功能，例如访问标签页、管理书签、发送网络请求等。

下面是一个简单的扩展代码示例，用于在浏览器工具栏中添加一个按钮，并在点击按钮时显示一个弹窗：

Javascript
// manifest.JSon
{
  "manifest_version": 2,
  "name": "My Extension",
  "version": "1.0",
  "browser_action": {
    "default_popup": "popup.html",
    "default_icon": {
      "16": "icon16.png",
      "48": "icon48.png",
      "128": "icon128.png"
    }
  }
}
// popup.html
<!DOCTYPE html>
<html>
  <head>
    <script src="popup.JS"></script>
  </head>
  <body>
    <button id="myButton">Click me!</button>
  </body>
</html>
// popup.JS
document.getElementById('myButton').addEventListener('click', function() {
  alert('Button clicked!');
});

在上述示例中，我们通过清单文件定义了扩展的基本信息和浏览器工具栏按钮的行为。在 popup.html 文件中，我们创建了一个按钮，并在 popup.JS 文件中监听按钮的点击事件，当按钮被点击时弹出一个提示框。

内容脚本

内容脚本是一种可以在网页上下文中执行的 JavaScript 代码，它可以与当前打开的网页进行交互。内容脚本可以访问页面的 DOM 结构、修改页面的样式和内容，甚至可以与页面中的 JavaScript 代码进行通信。

内容脚本通常用于扩展与网页之间的交互。例如，我们可以通过内容脚本向网页注入自定义的 HTML 元素或修改页面的样式，以实现对网页的定制化需求。

下面是一个简单的内容脚本示例，用于在百度搜索结果页面中高亮显示所有搜索关键字：

Javascript
// manifest.JSon
{
  "manifest_version": 2,
  "name": "My Extension",
  "version": "1.0",
  "content_scripts": [
    {
      "matches": ["AIdu.com/*">https://www.bAIdu.com/*</a>"],
      "JS": ["content.JS"]
    }
  ]
}
// content.JS
var keywords = window.location.search.substring(1).split('&');
keywords.forEach(function(keyword) {
  var elements = document.querySelectorAll('body :not(script):not(style)');
  elements.forEach(function(element) {
    var RegEx = new RegExp(keyword, 'gi');
    element.innerHTML = element.innerHTML.replace(RegEx, '<span style="background-color: yellow;">$&</span>');
  });
});

在上述示例中，我们通过清单文件指定了内容脚本的运行条件，即只在百度搜索结果页面中执行该脚本。在 content.JS 文件中，我们获取了当前页面的搜索关键字，并使用正则表达式在页面中将关键字进行高亮显示。

注入脚本

注入脚本是一种可以向网页中注入 JavaScript 代码的技术。与内容脚本不同，注入脚本的代码在网页的上下文中执行，可以与网页中的 JavaScript 代码进行交互。

注入脚本通常用于修改网页的行为或拦截特定的请求。例如，我们可以使用注入脚本拦截网页中的 Ajax 请求，并修改请求的参数或返回结果。

下面是一个简单的注入脚本示例，用于修改百度搜索结果页面的标题：

Javascript
// manifest.JSon
{
  "manifest_version": 2,
  "name": "My Extension",
  "version": "1.0",
  "permissions": ["AIdu.com/*">https://www.bAIdu.com/*</a>"],
  "web_accessible_resources": ["injected.JS"],
  "content_scripts": [
    {
      "matches": ["AIdu.com/*">https://www.bAIdu.com/*</a>"],
      "JS": ["content.JS"]
    }
  ]
}
// content.JS
var script = document.createElement('script');
script.src = Chrome.runtime.getURL('injected.JS');
document.head.appendChild(script);
// injected.JS
document.title = 'Modified Title - ' + document.title;

在上述示例中，我们通过清单文件声明了注入脚本的权限和可访问资源。在 content.JS 文件中，我们创建了一个 script 元素，并将注入脚本的路径指定为其 src 属性。这样，当网页加载完成时，注入脚本将会被加载并执行，从而修改页面的标题。

本文介绍了 Chrome 扩展中的三种常见代码类型：扩展代码、内容脚本和注入脚本，并通过案例代码示例它们的应用场景和区别。扩展代码主要用于定义扩展的行为和功能，内容脚本用于与网页进行交互和修改，注入脚本用于向网页中注入 JavaScript 代码。了解这些代码类型的特点和用途，可以帮助我们更好地开发和定制 Chrome 扩展。

举报有用（4）分享收藏

Chrome 扩展代码 vs 内容脚本 vs 注入脚本

1个回答

许金鱼

热门话题

相关问题