简单实现右键菜单添加网站功能

前端

2024-01-15 10:15:58

作为一个程序员，我们经常会在浏览网页的过程中，想要把某个页面固定在书签栏，方便以后访问。随着打开的标签页越来越多，书签栏就会显得越来越臃肿，查找也不方便。

今天给大家分享一个简单实用的 Chrome 小插件，可以把网站链接添加到右键菜单中，让你一键直达目标网站。

实现步骤

1. 创建一个新的 Chrome 扩展程序

在 Chrome 网上应用店中，点击“创建新项”按钮，选择“扩展程序”，然后填写扩展程序的详细信息。

2. 创建清单文件

清单文件是 Chrome 扩展程序的配置文件。它告诉 Chrome 有关扩展程序的基本信息，例如名称、版本和权限。

在扩展程序的根目录中创建一个名为 manifest.json 的文件，并添加以下代码：

{
  "manifest_version": 3,
  "name": "右键菜单添加网站",
  "version": "1.0.0",
  "description": "将网站链接添加到右键菜单",
  "permissions": ["contextMenus"],
  "content_scripts": [
    {
      "matches": ["<all_urls>"],
      "js": ["content.js"]
    }
  ],
  "background": {
    "scripts": ["background.js"]
  }
}

3. 创建 content.js 文件

content.js 文件在页面加载时运行，负责创建右键菜单项。

在扩展程序的根目录中创建一个名为 content.js 的文件，并添加以下代码：

// 创建右键菜单项
chrome.contextMenus.create({
  id: "add-to-bookmarks",
  title: "添加到书签",
  contexts: ["page"],
  onclick: function(info, tab) {
    // 获取当前页面的标题和 URL
    var title = info.pageUrl;
    var url = info.pageUrl;

    // 调用后台脚本，将书签信息发送到后台存储
    chrome.runtime.sendMessage({
      type: "add-bookmark",
      title: title,
      url: url
    });
  }
});

4. 创建 background.js 文件

background.js 文件在扩展程序的后台运行，负责存储和检索书签信息。

在扩展程序的根目录中创建一个名为 background.js 的文件，并添加以下代码：

// 接收来自 content.js 的消息
chrome.runtime.onMessage.addListener(function(request, sender, sendResponse) {
  if (request.type === "add-bookmark") {
    // 将书签信息添加到存储中
    chrome.storage.sync.set({
      [request.title]: request.url
    });
  }
});