Chrome扩展：让它运行每一页加载-JavaScript中文网-JavaScript教程资源分享门户

在开发前端网站时，我们通常需要对网页进行调试和测试。Chrome浏览器作为一款主流的浏览器，提供了强大的调试工具和插件系统。其中一个非常实用的功能是Chrome扩展。

Chrome扩展是一种能够增强Chrome浏览器功能的程序。通过Chrome扩展，我们可以自定义Chrome浏览器的行为，并且可以在每个网页加载时执行自己的代码。本文将介绍如何编写一个Chrome扩展，让它可以在每个网页加载时执行指定的代码。

准备工作

在开始编写Chrome扩展之前，我们需要先安装Chrome浏览器和一个文本编辑器。接下来，我们按照以下步骤创建一个基本的Chrome扩展。

创建一个新的文件夹，并在其中创建一个名为manifest.json的文件。这个文件是Chrome扩展的配置文件。

-- -------------------- ---- -------
-
  ------- --- -----------
  ---------- ------
  ------------------- --
  -------------- -- ----- -----------
  ------------------ -
    -
      ---------- ---------------
      ----- --------------
    -
  -
-

在这个文件中，我们定义了扩展的基本信息和要执行的代码。content_scripts字段是一个数组，其中包含了要在每个网页加载时执行的脚本。在这里，我们定义了一个叫做content.js的文件，它将被运行在所有URL上。

在同一文件夹中创建一个名为content.js的文件，并编写你要执行的代码。例如，以下代码会在每个页面加载时向控制台输出一条消息。

console.log("Hello, world!");

打开Chrome浏览器，点击右上角的菜单按钮，选择“更多工具”>“扩展程序”。
在扩展程序页面中，点击左上角的“加载已解压的扩展程序”按钮，选择刚刚创建的文件夹。如果一切正常，你应该看到扩展程序已经成功加载并可以在浏览器中使用了。

示例代码

为了进一步说明如何让Chrome扩展在每个网页加载时执行指定的代码，以下示例代码会自动将所有图片进行旋转。

-- -------------------- ---- -------
-
  ------- ------ ---------
  ---------- ------
  ------------------- --
  -------------- ------- --- --------
  ------------------ -
    -
      ---------- ---------------
      ----- --------------
    -
  -
-

function rotateImages() {
  const images = document.getElementsByTagName('img');
  for (let i = 0; i < images.length; i++) {
    images[i].style.transform = 'rotate(90deg)';
  }
}

rotateImages();

通过这段代码，我们首先在配置文件中定义了要执行的脚本content.js。在脚本中，我们使用document.getElementsByTagName('img')获取页面上所有的图片元素，然后对每个图片进行旋转操作。

结论

通过编写Chrome扩展，我们可以自定义浏览器的行为，并且在每个网页加载时执行指定的代码。这项功能非常有用，特别是在开发和调试前端网站时。希望本文能够帮助你了解如何创建一个基本的Chrome扩展，并启发你构思更加强大的扩展程序。

来源：JavaScript中文网，转载请注明来源 https://www.javascriptcn.com/post/14147