如何制作 Chrome 扩展 JS

想要为 Chrome 浏览器添加自定义的功能和交互方式吗？那就来制作一个 Chrome 扩展吧！本文将向您介绍如何制作一个简单的 Chrome 扩展，并给出一些有关 JS 的技巧，让您在扩展开发中事半功倍。

开始制作

编写 manifest.json 文件

每一个 Chrome 扩展都需要一个 manifest.json 文件，这个文件告诉浏览器我们的扩展需要什么功能和权限。下面是一个基本的 manifest.json 文件：

{
    "manifest_version": 2,
    "name": "My Awesome Extension",
    "version": "1.0",
    "description": "This is a really awesome extension!",
    "permissions": [
        "tabs"
    ],
    "background": {
        "scripts": [
            "background.js"
        ]
    },
    "content_scripts": [
        {
            "matches": [
                "<all_urls>"
            ],
            "js": [
                "content.js"
            ]
        }
    ]
}

代码片段

{
    "manifest_version": 2,
    "name": "My Awesome Extension",
    "version": "1.0",
    "description": "This is a really awesome extension!",
    "permissions": [
        "tabs"
    ],
    "background": {
        "scripts": [
            "background.js"
        ]
    },
    "content_scripts": [
        {
            "matches": [
                "<all_urls>"
            ],
            "js": [
                "content.js"
            ]
        }
    ]
}

上述代码定义了一个扩展文件夹中名称为 My Awesome Extension 的 Chrome 扩展。manifest_version 告诉浏览器本扩展使用的 manifest 格式，name、version 和 description 分别表示扩展的名称、版本和简介。permissions 定义了本扩展所需要的权限，此处我们使用了 tabs 权限，使得扩展能够打开和操作浏览器标签页。background 属性定义了扩展后台的脚本文件，而 content_scripts 属性定义了当一个 URL 被匹配时所需注入的脚本文件。

编写 background.js

下面我们接着编写 background.js，这个 JS 文件负责创建一个查找当前活动窗口的函数，并让扩展按钮在点击时打开一个新的标签页：

// 查找当前活动窗口并打开新的标签页
function openNewTab() {
    chrome.tabs.query({ active: true, currentWindow: true }, function(tabs) {
        chrome.tabs.create({ url: 'https://www.google.com' });
    });
}

// 扩展按钮被点击时调用 openNewTab 函数
chrome.browserAction.onClicked.addListener(openNewTab);

代码片段

// 查找当前活动窗口并打开新的标签页
function openNewTab() {
    chrome.tabs.query({ active: true, currentWindow: true }, function(tabs) {
        chrome.tabs.create({ url: 'https://www.google.com' });
    });
}

// 扩展按钮被点击时调用 openNewTab 函数
chrome.browserAction.onClicked.addListener(openNewTab);

编写 content.js

最后我们来完成 content.js，这个 JS 文件将会在所有页面中注入一个简单的提示框，以展示扩展功能：

// 创建提示框
var div = document.createElement('div');
div.style.position = 'fixed';
div.style.top = 0;
div.style.right = 0;
div.style.width = '200px';
div.style.height = '80px';
div.style.background = 'white';
div.style.border = '1px solid black';
div.style.textAlign = 'center';
div.innerHTML = 'Hello from my awesome extension!';
document.body.appendChild(div);

代码片段

// 创建提示框
var div = document.createElement('div');
div.style.position = 'fixed';
div.style.top = 0;
div.style.right = 0;
div.style.width = '200px';
div.style.height = '80px';
div.style.background = 'white';
div.style.border = '1px solid black';
div.style.textAlign = 'center';
div.innerHTML = 'Hello from my awesome extension!';
document.body.appendChild(div);

完成制作

现在我们已经成功地创建了一份最基本的 Chrome 扩展。接下来，将代码保存到扩展文件夹中，打开 Chrome 浏览器，进入扩展管理器页面，并激活“开发者模式”。通过“加载已解压的扩展程序”按钮，选择我们刚刚创建的文件夹即可成功安装扩展。

祝您创造愉快！

技能提升

1. Chrome API

Chrome API 是 Chrome 浏览器扩展开发中一个非常重要的概念。它包含了许多用于操作浏览器功能的方法和属性，如页面访问、网络请求、浏览器界面、书签管理等。想要更加深入地理解 Chrome API，您可以参考官方文档：Chrome 开发者文档。

2. 常用方法

在编写 Chrome 扩展时，您将会用到一些常用的 JS 方法，这里给出一些例子：

• document.createElement(tagName)：创建一个新的 HTML 元素。
• window.open(url, name, specs)：打开一个新的浏览器窗口。
• chrome.extension.getURL(path)：获取扩展文件绝对路径。
• chrome.storage.local：使用本地存储 API，存储和读取扩展数据。
• chrome.runtime.sendMessage(message, callback)：向后台脚本发送一条消息，并等待响应。

3. 常见问题

在开发 Chrome 扩展时，会遇到一些常见的问题，本文列出其中一些：

• No 'Access-Control-Allow-Origin' header is present on the requested resource.：在某些网站访问 API 时可能会遭遇到跨域访问的问题，解决方法是使用 XMLHttpRequest 发送请求，并在 manifest.json 中加入 permissions。
• Refused to execute inline script because it violates the following Content Security Policy directive：Chrome 扩展默认会阻止在 HTML 或 JS 中运行内联脚本，解决方法是将脚本单独移动到一个 JS 文件中，并在 manifest.json 中加入 content_security_policy。

参考文献

• Chrome 开发者文档
• Chrome API 参考手册