构建内容脚本的初学者指南

首页 > 编程 > 构建内容脚本的初学者指南

构建内容脚本的初学者指南

发布于2024-07-29

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

本文旨在介绍什么是内容脚本以及它们如何工作。还有一个演示项目，其中将讨论 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": [""],
        "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");
});

样式可以根据您的喜好进行更改，但是样式模板已包含在代码存储库中。

这是其实现的图片。

chrome extension
这是包含代码样式的源代码的链接。