前言
在日常的前端开发中，我们常常需要针对某个特定的网站进行特定的开发需求，比如对某网站进行特殊的样式定制、在某页中嵌入指定的 JavaScript 代码等等，而 Chrome 扩展可以帮助我们实现这些需求。
但是，开发一个 Chrome 扩展需要掌握一定的技术，而且我们希望开发完成后的扩展可以在多个计算机上运行，这时候 npm 包 Chrome-Extension-Execute-On-Website 就能够派上用场了。
Chrome-Extension-Execute-On-Website 包是一个可以帮助我们在加载指定网站时自动执行 JavaScript 代码的 npm 包。使用它可以省去繁琐的 Chrome 扩展开发过程，使自己的开发更为高效。
下面，我们就来详细介绍如何使用 npm 包 Chrome-Extension-Execute-On-Website。
环境准备
在使用 Chrome-Extension-Execute-On-Website 前，我们需要进行一些环境准备：
- 安装 Node.js 和 npm。
- 在 Chrome 浏览器中安装 Tampermonkey 插件。
初始化项目
首先，我们需要创建一个项目文件目录并在其中创建 package.json 文件，用于描述我们的项目依赖及其他信息。在终端中进入项目文件目录并输入如下命令：
npm init -y
接着，我们要安装 Chrome-Extension-Execute-On-Website 这个 node 包。在终端中输入如下命令：
npm i --save chrome-extension-execute-on-website
编写代码
当准备好环境并安装好 npm 包后，我们就可以开始编写代码了。下面，我们以一个简单的例子来演示 Chrome-Extension-Execute-On-Website 的使用方式。
首先，在项目根目录下创建一个 index.js 文件，并在其中编写一个简单的 JavaScript 函数，用于在网页中输出一句话：
function sayHello() {
console.log('Hello World!')
}然后，我们要为网站 www.baidu.com 创建一个 Tampermonkey 脚本，以在访问百度首页时自动执行 sayHello 函数。
在 Chrome 浏览器中打开 Tampermonkey 插件的脚本管理页面，在代码框中粘贴如下代码并保存：
-- -------------------- ---- -------
-- --------------
-- ----- -- ------------ ------
-- ---------- ---------------
-- ------ -------------------
-- ------ ----
-- ---------------
----------- -
---- --------
--- ------ - ---------------------------------
----------- - ------------------
---------- - --------------------------------------------------------
------------- - ---------- -
---------------------------------
-
----- ----------------
------- -------------------
-
---
--
----------------------------------
-----这个脚本其实就是在网站 www.baidu.com 中动态加载了一个包含 Chrome-Extension-Execute-On-Website 脚本的 JavaScript 文件，并在加载完成后调用了其中的 chromeExtensionExecuteOnWebsite 函数来执行我们所指定的 action 函数。
测试运行
现在，我们已经完成了代码的编写及脚本的创建。打开 Chrome 浏览器并访问 www.baidu.com，可以看到输出了一句话 “Hello World!”，这表明我们的脚本已经成功运行了。
总结
本文详细介绍了如何使用 npm 包 Chrome-Extension-Execute-On-Website 来自动执行 JavaScript 代码。在开发过程中，该包可以帮助我们省去繁琐的扩展开发过程，使自己的开发更为高效。希望本文能给读者带来一些帮助，更多信息可以访问 https://www.npmjs.com/package/chrome-extension-execute-on-website 获取。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600562b981e8991b448dff94