按照 Chrome 扩展 : 扩展是什么?中引导,接着就是入门教程。css
扩展由不一样但内聚的组件组成。组件能够包括后台脚本、内容脚本、选项页、UI 元素和各类逻辑文件。扩展组件是使用 web 开发技术建立的:HTML、CSS 和 JavaScript 。扩展的组件将取决于其功能,可能不须要全部选项。html
刚开始,建立一个新文件夹用来存放扩展的文件。git
完整的扩展能够在这里下载。github
扩展从 manifest 开始。建立一个名为 manifest.json
文件并包含如下代码。web
{ "name": "Getting Started Example", "description": "Build an Extension!", "version": "1.0", "manifest_version": 3 }
在当前状态下,能够在开发人员模式下将包含 manifest 文件的目录添加为扩展。chrome
导航到 chrome://extensions
打开扩展管理页面。编程
嗒嗒!已成功安装扩展。由于在 manifest 中没有包含图标,因此将为扩展建立一个通用图标。json
如今已经安装了扩展,可是它如今什么作不了,由于咱们尚未告诉它作什么或者何时作。咱们经过添加一些代码来存储背景色值来解决这个问题。api
为此,咱们须要建立一个后台脚本并将其添加到扩展的 manifest 中。首先在扩展的目录中建立一个名为 background.js
的文件。架构
{ "name": "Getting Started Example", "description": "Build an Extension!", "version": "1.0", "manifest_version": 3, + "background": { + "service_worker": "background.js" + } }
与许多其它重要组件同样,后台脚本必须在 manifest 中注册。在 manifest 中注册一个后台脚本会告诉扩展要引用哪一个文件,以及该文件的行为。
Chrome 如今意识到扩展包含一个服务。当你从新加载扩展时,Chrome 将扫描指定的文件以获取附加指令,例如须要侦听的重要事件。
这个扩展一旦安装,就须要来自持久变量的信息。首先在后台脚本中包含一个对 runtime.onInstalled 的监听。在 onInstalled
侦听器中,扩展将使用 storage API 设置一个值。这将容许多个扩展组件访问该值并更新它。
let color = '#3aa757'; chrome.runtime.onInstalled.addListener(() => { chrome.storage.sync.set({ color }); console.log('Default background color set to %cgreen', `color: ${color}`); });
大多数的 API ,包括 storage API ,必须在 manifest 中的 permissions
字段下注册,扩展才能使用它们。
{ "name": "Getting Started Example", "description": "Build an Extension!", "version": "1.0", "manifest_version": 3, "background": { "service_worker": "background.js" }, + "permissions": ["storage"] }
返回到扩展管理页面,点击 Reload 连接。一个新的字段 Inspect views 可用,它有一个蓝色的连接:background page 。
点击连接查看后台脚本输出的日志:"Default background color set to green"
在 Chrome 版本 90.0.4430.85(正式版本) (x86_64) 中试了一下,发现有些出入的地方:
扩展能够有多种形式的用户界面;这一种将使用 popup 。建立并添加名为 popup.html
的文件到扩展的目录。此扩展使用按钮更改背景色。
<!DOCTYPE html> <html> <head> <link rel="stylesheet" href="button.css"> </head> <body> <button id="changeColor"></button> </body> </html>
与后台脚本同样,这个文件必须在 manifest 中声明,以便 Chrome 在扩展弹出窗口中显示它。为此,向 manifest 添加一个 action 对象并设置 popup.html
做为 action
的 default_popup
属性值。
{ "name": "Getting Started Example", "description": "Build an Extension!", "version": "1.0", "manifest_version": 3, "background": { "service_worker": "background.js" }, "permissions": ["storage"], + "action": { + "default_popup": "popup.html" + } }
这个弹出窗口的 HTML 引用了一个名为 button.css
的 CSS 文件。 将另外一个文件添加到扩展的目录中,适当地命名它,并添加如下代码。
button { height: 30px; width: 30px; outline: none; margin: 10px; border: none; border-radius: 2px; } button.current { box-shadow: 0 0 0 2px white, 0 0 0 4px black; }
工具栏图标的指定也包含在 action
的 default_icons
字段下。在这里下载图片文件,解压它,并将它放在扩展的目录中。更新 manifest ,使扩展知道如何使用图片。
{ "name": "Getting Started Example", "description": "Build an Extension!", "version": "1.0", "manifest_version": 3, "background": { "service_worker": "background.js" }, "permissions": ["storage"], "action": { "default_popup": "popup.html", + "default_icon": { + "16": "/images/get_started16.png", + "32": "/images/get_started32.png", + "48": "/images/get_started48.png", + "128": "/images/get_started128.png" + } } }
扩展还能够在扩展管理页、权限警告和 favicon 上显示图像。这些图像在 manifest 的 icons 字段下指定。
{ "name": "Getting Started Example", "description": "Build an Extension!", "version": "1.0", "manifest_version": 3, "background": { "service_worker": "background.js" }, "permissions": ["storage"], "action": { "default_popup": "popup.html", "default_icon": { "16": "/images/get_started16.png", "32": "/images/get_started32.png", "48": "/images/get_started48.png", "128": "/images/get_started128.png" } }, + "icons": { + "16": "/images/get_started16.png", + "32": "/images/get_started32.png", + "48": "/images/get_started48.png", + "128": "/images/get_started128.png" + } }
若是在此阶段从新加载扩展,它将包含提供的图标而不是默认占位符,单击该操做将打开一个带有默认颜色按钮的弹出窗口。
弹出 UI 的最后一步是向按钮添加颜色。在扩展目录中建立名 popup.js
的文件,并添加如下代码。
// Initialize button with user's preferred color let changeColor = document.getElementById("changeColor"); chrome.storage.sync.get("color", ({ color }) => { changeColor.style.backgroundColor = color; });
这个代码从 popup.html
中抓取按钮,并从存储中请求颜色值。而后将颜色做为按钮的背景。在 popup.html
中添加一个指向 popup.js
脚本标签。
<!DOCTYPE html> <html> <head> <link rel="stylesheet" href="button.css"> </head> <body> <button id="changeColor"></button> + <script src="popup.js"></script> </body> </html>
从新加载扩展查看绿色按钮。
扩展示在有一个自定义图标和一个弹出窗口,它根据保存到扩展存储中的值为弹出窗口按钮着色。接下来,它须要进一步的用户交互逻辑。在 popup.js
文件末尾添加如下内容 。
// When the button is clicked, inject setPageBackgroundColor into current page changeColor.addEventListener("click", async () => { let [tab] = await chrome.tabs.query({ active: true, currentWindow: true }); chrome.scripting.executeScript({ target: { tabId: tab.id }, function: setPageBackgroundColor, }); }); // The body of this function will be executed as a content script inside the // current page function setPageBackgroundColor() { chrome.storage.sync.get("color", ({ color }) => { document.body.style.backgroundColor = color; }); }
更新后的代码向按钮添加了一个 click
事件监听器,该监听器触发一个以编程方式注入的内容脚本。这将使页面的背景色与按钮的颜色相同。使用编程注入容许用户调用内容脚本,而不是将不须要的代码自动插入网页。
manifest 将须要 activeTab 权限来容许扩展临时访问当前页,而且须要 scripting 权限来使用脚本 API 的 executeScript 方法。
{ "name": "Getting Started Example", ... + "permissions": ["storage", "activeTab", "scripting"], ... }
扩展示在功能完成了!从新加载扩展,刷新此页面,打开弹出窗口并单击按钮将其变为绿色!可是,有些用户可能但愿将背景更改成不一样的颜色。
该扩展目前只容许用户将背景更改成绿色。包含一个选项页面可让用户更好地控制扩展的功能,进一步定制他们的浏览体验。
首先在目录建立一个名 options.html
的文件并包含如下代码。
<!DOCTYPE html> <html> <head> <link rel="stylesheet" href="button.css"> </head> <body> <div id="buttonDiv"> </div> <div> <p>Choose a different background color!</p> </div> </body> <script src="options.js"></script> </html>
在 manifest 中登记选项页面。
{ "name": "Getting Started Example", ... + "options_page": "options.html" }
从新加载并点击 DETAILS 。
向下滚动详情页面并选择 Extension options 以查看选项页面。
最后一步是添加选项逻辑。在扩展的目录中建立一个名为 options.js
的文件并添加如下代码。
let page = document.getElementById("buttonDiv"); let selectedClassName = "current"; const presetButtonColors = ["#3aa757", "#e8453c", "#f9bb2d", "#4688f1"]; // Reacts to a button click by marking the selected button and saving // the selection function handleButtonClick(event) { // Remove styling from the previously selected color let current = event.target.parentElement.querySelector( `.${selectedClassName}` ); if (current && current !== event.target) { current.classList.remove(selectedClassName); } // Mark the button as selected let color = event.target.dataset.color; event.target.classList.add(selectedClassName); chrome.storage.sync.set({ color }); } // Add a button to the page for each supplied color function constructOptions(buttonColors) { chrome.storage.sync.get("color", (data) => { let currentColor = data.color; // For each color we were provided… for (let buttonColor of buttonColors) { // …create a button with that color… let button = document.createElement("button"); button.dataset.color = buttonColor; button.style.backgroundColor = buttonColor; // …mark the currently selected color… if (buttonColor === currentColor) { button.classList.add(selectedClassName); } // …and register a listener for when that button is clicked button.addEventListener("click", handleButtonClick); page.appendChild(button); } }); } // Initialize the page by constructing the color options constructOptions(presetButtonColors);
提供四种颜色选项,而后在选项页上生成带有 onclick 事件侦听器的按钮。当用户单击按钮时,它会更新扩展存储中的颜色值。因为扩展的全部文件都从该存储中提取颜色信息,所以不须要更新其它值。
祝贺!这个目录如今拥有一个功能完整的 Chrome 扩展,尽管它过于简单。
下一步呢?