如何构建 Chrome 扩展程序

Chrome 扩展清单版本 3 现已发布！

Chrome 扩展程序由 5 个部分组成

Chrome 扩展清单版本 3 现已发布！

请查看我们的CHROME EXTENSION V3课程，获取易于理解的视频课程。

如果您订阅我们的时事通讯，您可以享受购买价格 20% 的折扣！

Chrome 扩展程序由 5 个部分组成

清单文件
背景脚本
前台脚本
弹出页面
选项页面

...

1.

一切都从“manifest.json”文件开始。

我们的扩展程序如何、在何处以及何时与用户的浏览器进行交互都包含在清单中。

清单确定了我们的 chrome 扩展的名称、版本和描述以及后台脚本、弹出窗口和选项页面。

它还确定了我们可以注入前台脚本的位置（稍后会详细介绍...）。

{
    "name": "obj ext",
    "description": "my ext",
    "version": "0.1.0",
    "manifest_version": 2,
    "icons": {
        "16": "./obj-16x16.png",
        "32": "./obj-32x32.png",
        "48": "./obj-48x48.png",
        "128": "./obj-128x128.png"
    },
    "background": {
        "scripts": ["./background.js"]
    },
    "options_page": "./options.html",
    "browser_action": {
        "default_popup": "popup.html"
    },
    "permissions": [
        "tabs",
        "https://www.google.com/*",
        "storage"
    ] 
}

2.

后台脚本（“background.js”）是一个 JavaScript 脚本，在我们的扩展安装或用户手动刷新扩展后运行。

需要注意的是，
后台脚本实际上无法访问用户正在查看的任何网页，因此后台脚本无法操作DOM。

那么我们如何让 Chrome 扩展程序在用户的网页上执行操作呢？

这就是前台脚本发挥作用的地方。

我们的后台脚本能够将前台脚本以及 CSS（如果您愿意）注入页面。

这就是我们如何使用 Chrome 扩展程序来操作网页的DOM 。

我们如何将前台脚本注入到前台？

在 background.js 脚本中...

let active_tab_id = 0;

chrome.tabs.onActivated.addListener(tab => {
    chrome.tabs.get(tab.tabId, current_tab_info => {
        active_tab_id = tab.tabId;

        if (/^https:\/\/www\.google/.test(current_tab_info.url)) {
            chrome.tabs.insertCSS(null, { file: './mystyles.css' });
            chrome.tabs.executeScript(null, { file: './foreground.js' }, () => console.log('i injected'))
        }
    });
});

我们有一个监听器，用于监视我们对标签页的操作。
如果当前标签页是 Google 主页，我们就将脚本注入到该标签页中。

' null ' 表示我们正在查看的当前标签页。

从这里开始，我们的 foreground.js 脚本就像任何其他影响 index.html 页面的脚本一样。
我们可以访问窗口和文档 (DOM)。

如果我们愿意，我们可以让 Google 主页的标志旋转起来。

3.

在‘foreground.js’中我们写道...

document.querySelector('#hplogo').classList.add('spinspinspin');

...在' mystyles.css '中我们写道...

.spinspinspin {
    animation-name: spin;
    animation-duration: 1.0s;
    animation-iteration-count: infinite;
}

@keyframes spin {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(1440deg);
    }
}

...就像这样，当我们导航到 Google 主页时，我们的前台脚本就会注入，并且该徽标就会旋转。

4.

“popup.html”页面是可选的。

弹出页面是用户点击右上角扩展程序图标时显示的页面。
它是一个 HTML 页面，如果需要，可以附加脚本。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <h1>I'm the popup</h1>
    <script></script>
</body>
</html>

5.

“options.html”页面就像弹出页面一样。

用户导航到扩展程序选项卡并点击选项时会看到它。
它也可以是一个 HTML 页面，如果需要，可以附加脚本。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <h1>I'm the options</h1>
    <script></script>
</body>
</html>

...

因此，正是这种后台和前台之间的关系——就像前端和后端一样——将Google Chrome 扩展程序联系在一起。

如果您想查看更深入的指南，包括前台如何与后台通信以及如何在 Chrome 扩展程序中管理状态，请在 YouTube 上观看我的完整视频教程“对象是”。