构建内容脚本的初学者指南-js教程-PHP中文网

浏览器扩展是浏览器的附加组件，用于为网站增添美感并提供最佳的用户体验。
扩展开发中的内容脚本概念是开发人员必须掌握的非常有用的知识，因为它显着扩展了浏览器扩展的用例。

本文旨在介绍什么是内容脚本以及它们如何工作。还有一个演示项目，其中将讨论 chrome 扩展的基础知识，并在我们的扩展中使用一个简单的内容脚本。就这样，我们开始吧。

了解内容脚本

首先，什么是内容脚本？内容脚本是 JavaScript 代码，通过浏览器扩展与网页交互时，执行这些代码来修改网页。

它通过与网页文档对象模型交互轻松实现这一点。网页文档对象模型是给定网页的原始结构。 Chrome 内容脚本修改相关网页的方式通常称为注入。

对内容脚本进行了简要介绍后，我们将继续在我们的网页上实现它。但在此之前，我们需要设置浏览器扩展来为脚本提供支持。

设置您的 Chrome 扩展程序

设置 Chrome 扩展文件非常简单。如需进一步参考构建扩展程序，下面附有 Chrome 扩展程序文档页面的链接。
理想的 Chrome 扩展程序必须包含详细的 manifest.json 文件，该文件提供有关 Chrome 扩展程序的默认背景信息。
此外，还包括要执行的相应 JS 文件。其他附加文件（HTML 和 CSS）有助于为扩展提供美感。
有了这个，让我们继续构建我们的扩展，合并我们的内容脚本注入。我们将通过创建一个 Chrome 扩展程序来说明内容脚本的强大功能，该扩展程序会在我们导航到的任何活动网页上显示一个按钮。

编写清单文件

在本节中，将突出显示并讨论清单文件的各个部分。这是该项目清单文件的代码。

{
    "manifest_version": 3,
    "name": "Add Button",
    "version": "1.0",
    "description": "An extension that alerts a response when clicked",
    "permissions": ["activeTab"],
    "content_scripts": [
{
        "matches": ["<all_urls>"],
        "js": ["ContentScript.js"],
        "CSS": ["Button.css"]
}
]
}

登录后复制

清单版本： 通常会请求清单版本。默认情况下，它设置为 3。因为它比版本 2 有明显更好的升级。
名称： 扩展名也会在清单文件中输入。就我而言，该项目名为“添加按钮”。可以对其进行调整以满足用户的偏好。
还输入 Chrome 扩展程序的版本。在我们的例子中，这是该扩展的第一个版本，因此它被命名为 1.0，对该扩展的后续改进可以提示修改文件以分别增加版本。
描述：对扩展程序功能的描述还可以让扩展程序的非技术用户相信 Chrome 扩展程序。

后续提出的观点在构建内容脚本方面非常有说服力。

权限对象突出显示内容脚本的执行路径。这还可以防止内容脚本在意外的选项卡和网页中运行。它允许我们列出 Chrome 扩展程序可能需要的所有权限。某些 Chrome 扩展程序可能需要访问浏览器存储、其他 Chrome API 和某些相关网站。在我们的这个项目中，我们将 Chrome 扩展限制为仅使用正在使用的活动浏览器选项卡。为了降低 Chrome 扩展程序损害 Chrome 浏览器其他未使用部分的风险，这一点非常重要。

然后我们将在清单文件中配置内容脚本字段。
内容脚本字段指定我们打算注入到网页中的各种代码文件。
它包含匹配子字段，该字段指定我们希望其执行操作的网页 URL。为了便于使用，我们只包含了所有 URL，允许它在我们访问的所有网页上运行。不过，您可以指定要在子字段值中注入的 URL。例如 www.google.com，

"matches": ["https://*.google.com/*"]
run_at": "document_idle

登录后复制

还指定了包含注入代码的JS文件。在我们的例子中，
我们的 JS 文件名为 Content script.js。我们还指定了用于设计该项目样式的 CSS 文件。

这样，我们就为我们的项目实现了清单文件的微型实现。然后我们将在后续部分继续编写注入代码

创建内容脚本

本着保持简单的精神，我们将创建一个简单的按钮，单击该按钮时会显示一条警报消息。该按钮预计会覆盖现有网页。
下面是代码

// Create a button element
const button = document.createElement("button");

// Set the button's text content
button.textContent = "Click me";

// Set the button's ID
button.id = "clickMe";

// Append the button to the document body
document.body.appendChild(button);

// Add a click event listener to the button
button.addEventListener("click", () => {
  // Show an alert when the button is clicked
  alert("Click event listener was added");

  // Log a message to the console
  console.log("Hello world");
});

登录后复制

The styling can be changed to suit your preference however a styling template has been included in the code repository.

here is a picture of its implementation.

chrome extension
Here is the link to the source code containing the code styling.

Advanced Techniques and Use Cases

So far we have completed the project. However to advance one's knowledge, here are some of the advanced techniques and best practices you can also implement while building content scripts.