Chrome 扩展注入 HTML - JavaScript

Chrome 扩展允许开发者增强浏览器的功能，并且允许用户定制其浏览器界面。通过 Chrome 扩展，开发者可以注入 HTML 和 JavaScript 代码到已经打开的网页中，从而扩展页面的功能。

注入 HTML

通过 Chrome API 的 chrome.tabs.executeScript 方法，可以向当前选中的标签页注入一段 HTML 代码。

chrome.tabs.executeScript(tabId, {
  code: 'document.body.innerHTML = "<h1>Hello World!</h1>";'
});

这个方法接受两个参数，第一个参数 tabId 是需要注入代码的标签页的 ID，第二个参数是一个对象，包含了要注入的代码。在这个例子中，注入了一个 h1 标签。

注入 JavaScript

同样地，Chrome API 的 chrome.tabs.executeScript 方法也可以注入 JavaScript 代码：

chrome.tabs.executeScript(tabId, {
  code: 'console.log("Hello World!");'
});

这段代码将在打开的标签页中注入一行简单的 JavaScript 代码，用于输出 "Hello World!" 到浏览器控制台。

向 Content Script 注入代码

通过在扩展的 manifest.json 文件中添加一个 content_scripts 键，可以指定要注入到网页的 Content Script 文件。Content Script 是一些运行在网页上下文中的 JavaScript 文件，它们可以与页面交互并修改网页内容。

{
  "name": "My Extension",
  ...
  "content_scripts": [
    {
      "matches": ["https://*.google.com/*"],
      "js": ["contentScript.js"]
    }
  ],
  ...
}

在这个例子中，指定了要在 Google 的搜索页面上注入 contentScript.js 文件。

结论

通过 Chrome 扩展，开发者可以很容易地向已经打开的网页中注入 HTML 和 JavaScript 代码，从而扩展页面的功能。这种方式可以让开发者为用户增添更多便利，提高用户的体验。