在前端开发中，我们通常需要向页面中注入代码以实现特定的功能。但是，为了避免污染全局作用域，我们需要使用一种安全且可控的方式来注入代码。这就是使用内容脚本。
什么是内容脚本？
内容脚本是指在扩展程序中执行的 JavaScript 脚本，它可以访问当前网页的 DOM 和 JavaScript 对象，并且可以修改和操纵页面的内容。通过使用内容脚本，我们可以向页面中注入自定义的代码或样式等资源。
如何编写内容脚本？
要编写内容脚本，我们需要创建一个包含以下信息的 manifest.json 文件：
-- -------------------- ---- -------
-
------------------- --
------- --- -----------
---------- ------
------------------ -
-
---------- -------------- ---------------
----- ---------------------
-
-
-其中，content_scripts 字段告诉浏览器哪些页面需要加载我们的内容脚本。在这个示例中，我们指定了所有的 http 和 https 页面都会加载我们的脚本文件 content_script.js。
接下来，我们需要在 content_script.js 文件中编写我们的代码。例如，如果我们想要向页面中添加一个按钮，可以这样做：
-- -------------------- ---- ------- -- ---------- ----- ------ - --------------------------------- ------------------ - ------ ----- -- --------- ---------------------------------- -- ------------ -------------------------------- -- -- - ------------- --------- ---
注意事项
在编写内容脚本时，我们需要注意以下几点：
- 内容脚本是在页面上下文中执行的，因此它们可以访问和修改页面的 DOM 和 JavaScript 对象。但是，它们不能直接访问扩展程序中的变量和函数。
- 内容脚本是在页面加载完成后执行的，因此如果我们想要在页面加载时立即注入代码，需要在
manifest.json文件中将"run_at": "document_start"设置为"run_at": "document_idle"。
示例代码
下面是一个在页面加载时向页面中插入一个 div 元素的示例代码：
-- -------------------- ---- -------
-
------------------- --
------- --- -----------
---------- ------
------------------ -
-
---------- -------------- ---------------
----- ----------------------
--------- ---------------
-
-
-const div = document.createElement('div');
div.innerText = 'Hello, world!';
document.body.appendChild(div);通过使用内容脚本，我们可以安全地向页面中注入自定义的代码，从而实现丰富的功能和交互效果。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/8383