如果你正在开发一个 Chrome 扩展，并且想要改变某个网页的外观，那么你需要了解如何使用内容脚本注入自定义CSS。本文将介绍如何在扩展中实现这一目标。
什么是内容脚本
内容脚本是一种在浏览器内注入 JavaScript 和 CSS 的技术。它可以让我们修改网站上的内容和样式，以实现更好的用户体验。Chrome 扩展可以使用内容脚本来与当前打开的页面进行交互，并向其添加自定义样式或脚本。
如何注入 CSS
要向页面注入 CSS 样式，我们需要编写一个内容脚本，并在扩展清单文件中声明它。以下是一个示例：
// contentScript.js 文件
const style = document.createElement('style');
style.textContent = `
/* 这里是你的 CSS 样式 */
`;
document.head.append(style);将上述代码保存为 contentScript.js 文件。然后，在扩展清单文件中添加以下内容：
-- -------------------- ---- -------
-
------- --- -----------
---------- ------
------------------- --
------------------ -
-
---------- ------------------------------
----- --------------------
-
-
-在以上示例中，我们向 https://www.example.com/ 网站注入了一个自定义的 CSS 样式。如果你需要在其他网站上使用该扩展，请修改 matches 属性的值。
实现可选配置
在实际开发中，我们可能需要让用户能够动态配置注入的 CSS 样式。为此，我们可以使用 Chrome 扩展提供的 storage API，将用户的设置保存到浏览器存储中，并在内容脚本中读取这些设置。
以下是一个示例：
// contentScript.js 文件
chrome.storage.sync.get(['myStyle'], function(result) {
const style = document.createElement('style');
style.textContent = result.myStyle || '';
document.head.append(style);
});在以上示例中，我们从存储中读取名为 myStyle 的设置，并将其应用于当前页面。如果用户没有指定样式，则我们不会添加任何内容。
我们可以使用 options 页面来让用户编辑这些设置。以下是一个示例：
-- -------------------- ---- -------
---- ------------ -- ---
--------- -----
------
------
--------- --------- ---------------
-------
------
------ -------------------- ------------
--------- ------------------------
------- ------------------------------
--------
-------- ------ -
----- ------- - -----------------------------------------
-----------------------------------
-
------------------------------------ ---------------- -
---------------------------------------- - -------------- -- ---
---
---------
-------
-------在以上示例中，我们提供了一个文本框，让用户输入自定义 CSS 样式，并将其保存到存储中。在每次打开选项页面时，我们从存储中读取设置，并将其显示在文本框中。
总结
在 Chrome 扩展中使用内容脚本注入 CSS 样式是一种强大的技术，可以让我们改变网页的外观和行为，提高用户体验。通过本文所述的方法，我们可以轻松地实现这一目标，并且还可以让用户自定义样式。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/31224
