用 Chrome 扩展程序控制互联网！

作为一名 Web UI 开发人员和设计师，需要学习的东西不计其数，但一天中的时间却有限。有些主题我特意避开了，例如移动和离线应用程序开发，因为在数百万个闪亮的新主题中，你总得在某个地方划清界限，然后才能完成一些工作。我过去一直避免的领域之一就是浏览器扩展开发。我不明白它们是如何工作的，开发环境是什么，或者权限如何与覆盖页面交互，坦白地说，我认为我对此不感兴趣。

然后有一天，我非常有才华的设计师/开发人员朋友 Natalie Schoch 让我帮她完成一个 Chrome 扩展程序。她已经完成了前端原型，但需要一些帮助来插入数据集和交互式 JavaScript。该项目名为 Wordsmith，现已在 Chrome 扩展程序商店中发布。这是一个免费且美观的学习新词汇的方式，让你在浏览网页时学习。扩展程序会在每个新标签页中显示一个新的词汇，以及其定义和同义词。

总之，关于我们制作的新东西就说到这里，接下来让我们开始探索 Chrome 扩展程序的乐趣吧！

一个动画演示了当你打开 Chrome 中的新标签页时 Wordsmith 扩展程序是如何工作的。

首先，Chrome 扩展程序到底是什么？根据 Chrome 开发者文档

扩展程序是基于事件的程序，用于修改或增强 Chrome 浏览体验。 它们使用户能够根据个人需求或偏好定制 Chrome 的功能和行为。它们构建在 HTML、JavaScript 和 CSS 等 Web 技术之上。

（我加的强调）

基本上，Chrome 扩展程序是一个基于普通浏览体验构建的单一功能工具，用于覆盖一组集中的交互。

启动一个最基本的扩展程序

Chrome 文档大多都很直观，但对于初学者来说可能会过于复杂。在本地项目目录中，首先需要创建一个 manifest.json 文件。此文件充当扩展程序的命令中心。在这里，你将告诉 Chrome 它应该注意哪些文件以及你正在使用哪种扩展程序逻辑。

{
  “version”: 1.0:, // This is your regular project version number
  “manifest_version”: 2, // Just use 2, it's the stable version you want
  “name”: “Wordsmith”,  // The name of your extension!
  “description”: “New tab? New word!”,  // The description of your extension!
  “author”: “Natalie Schoch and Lindsay Grizzard”, // Who you are
  “chrome_url_overrides” : {
    “newtab”: “newtab.html”
  }
}

让我们谈谈 chrome_url_overrides 部分。这告诉 Chrome，“嘿，你通常加载（在这种情况下）在新标签页中加载的东西，改为加载我制作的这个很酷的东西。” 我建议从一个新标签页 Chrome 扩展程序开始，因为这是最快速的方式来查看这个扩展程序是否可以正常工作。你还可以覆盖历史记录或书签，但我建议你自己探索一下。

现在，我们可以创建一个名为 newtab.html 的新文件

<!DOCTYPE HTML>
<html>
<body>
  <h1> Hey there world </h1>
</body>
</html>

太好了！现在，你只需将其加载到 Chrome 的扩展程序开发者系统中即可查看你的杰作。要启动并运行它，请按照以下步骤将你的项目加载到 Chrome 的开发者模式中

转到 chrome://extensions
在右上角打开“开发者模式”
点击“加载未打包”
加载包含 manifest.json 和 newtab.html 文件的目录
打开一个新标签页！

你应该会看到这个神奇的效果

你刚刚构建了一个 Chrome 扩展程序。恭喜！在这一点上，你可以继续自己的冒险，并为新标签页创建任何静态设计。你可以像往常一样编写 CSS（设置 SCSS 编译、脚本标签、内联如果你是一个怪物，等等…），并创建新的静态内容。

更改 manifest.json 文件或 JS 文件时，最重要的是要返回 chrome://extensions 并点击扩展程序的重新加载图标。它不会自动从你的本地开发更新，并且如果不执行此步骤，你的更改将不会反映出来。这让我感到非常困惑。

现在让我们谈谈 JavaScript

Chrome 扩展程序中有两种类型的脚本文件：内容脚本和后台脚本。

后台脚本用于处理核心应用程序任务。它们可以充当应用程序的控制器，处于休眠状态，直到事件触发并事件完成后卸载。当你想要控制应用程序的核心逻辑或侦听页面 DOM 之外的交互时，请使用后台脚本。例如，点击工具栏右上角的 Chrome 扩展程序图标。这不是页面特定 DOM 的一部分。如果你想操作当前沙盒页面之外的内容，你需要后台脚本。

需要注意的是，这些依赖于 Chrome API 并且稍微复杂一些。在 Wordsmith 中，我决定完全放弃后台脚本，因为我们只需要 DOM 特定的 UI。我发现后台脚本特别棘手，并且从 Daniel Shiffman 的视频教程中获得了最多的帮助。事实上，他的整个教程系列是扩展开发的一个很好的入门介绍。

内容脚本在特定网页的上下文中和隔离状态下执行 JavaScript。这意味着每个脚本都可以访问当前的 DOM 并对其进行操作，但 DOM 及其脚本不能反过来操作 Chrome 扩展程序。内容脚本对 Chrome API 的访问权限有限，并且存在于单个隔离的实例中。这可以保护扩展程序信息并阻止库冲突。

酷，但这到底意味着什么？它说明了两件事。你可以使用内容脚本执行常规的浏览器 JavaScript，就像在简单的 Web 应用程序中一样。隔离定义意味着你的扩展程序的 JavaScript 位于自己的宇宙中，与任何网页的 JavaScript 分开。这可以防止 API 密钥等信息泄露给页面脚本。它还可以让你在扩展程序中使用任何版本的 JavaScript 库，而无需担心在给定网页上出现版本冲突。

使用内容脚本的实际区别在于它们是如何加载的。不是在 HTML 中直接链接到文件，而是使用 manifest.json 文件指示你想要调用的脚本。

{
  “manifest_version”: 2,
  “name”: “Wordsmith”,
  “description”: “New tab? New word!”
  “author”: “Natalie Schoch and Lindsay Grizzard”,
   “chrome_url_overrides” : {
     “newtab”: “newtab.html”
  },
  "content_scripts": [
    {
     "matches": [
       "<all_urls>" //see all match pattern options in the chrome docs
     ],
     "js": ["[your-path-to]/jquery.min.js","[your-path-to]/scripts.js"]
    }
  ]
 }

manifest.json 文件中这个新的内容脚本命令告诉 Chrome 一些信息。它使用“matches”语句告诉 Chrome 你希望该文件在何处运行。你是否希望它在每个 Chrome 页面上加载？你是否正在制作一个扩展程序，该扩展程序只应影响某些页面？要指定这一点，请添加相应的 URL 匹配模式来告诉 Chrome 注意什么。它还告诉清单文件在哪里可以找到你的内容脚本以及以什么顺序执行它们。

更改 manifest.json 文件或 JavaScript 文件时，必须返回 chrome://extensions 并点击扩展程序的重新加载图标。

在你的新脚本文件中添加一个 console.log()，重新加载你的扩展程序，导航到任何 URL，你就会看到你的控制台消息。看到控制台日志表明你现在可以访问 DOM 并开始操作它了。 CHROME 扩展程序太酷了。你可以随意玩弄互联网的前端，而无需源代码或复杂的开发环境。现在让我们来玩得开心一点，把页面上的所有 div 都变成红色吧！

$('div').css('background-color','red');

现在，转到另一个网站。一切都很糟糕，都是红色的，但你拥有如此强大的力量！你可以操纵任何网页来满足你的需求。继续前进，将互联网的设计塑造成对你或他人来说更好（或更糟）的东西！

这基本上是你开始使用 Chrome 扩展程序所需了解的一切。虽然文档一开始可能有点陌生，但可以从一个简单的静态新标签页扩展程序开始，然后迭代！

祝你 manifest(.json) 愉快！

查看 Wordsmith 的 GitHub 仓库，了解我们是如何构建我们的第一个 Chrome 扩展程序的，并且可以随时 fork 并告诉我们有关错误的信息！

James

# 2018年9月25日

我认为扩展程序有一个新的标准……称为“Web 扩展程序”。来自 MDN

“WebExtensions 是一个跨浏览器的系统，用于在 Firefox 中开发浏览器扩展程序。该系统提供 API，这些 API 在很大程度上得到了不同浏览器（如 Mozilla Firefox、Google Chrome、Opera 浏览器和 Microsoft Edge）的支持。”

有人知道这方面的情况吗？

Lindsay Grizzard

评论永久链接# 2018年9月25日

哦，我不知道这个……也许是我的下一篇文章主题！

Cinnfhaelidh

插件可以成为一种非常棒的方式，既可以节省你的时间，也可以帮助非开发人员使用其他情况下令人困惑的创作系统。

我之前做过一个扩展，帮助用户快速在页面的实时、预览和编辑视图之间切换，还有一个帮助用户在具有特定位置变体的网站上进行操作。

你可以简单地向浏览器添加方便易懂的按钮。

Lindsay Grizzard

评论永久链接# 2018年9月25日

这是一个很棒的用法。我喜欢这个主意！！！

Peter Popluhar

# 2018年9月26日

非常感谢这篇文章，它真的很棒。我按照你的例子操作，发现manifest.json文件存在问题。为了使其正常工作，我不得不不仅指定manifest_version，还必须指定version本身。
“version”: “1.0”,
“manifest_version”: 2

但无论如何还是要感谢这篇文章。

此致

Lindsay Grizzard

评论永久链接# 2018年9月26日

嘿，Peter，你说得完全正确！我漏掉了那部分。正在更新。

Karl

# 2018年10月3日

感谢您的这篇教程 - 这是一个很好的起点！

启动一个最基本的扩展程序

现在让我们谈谈 JavaScript

评论