手摸手教你写个chrome插件

2022 年 08 月 13 日

316 次浏览

4914字数

目录
需求分析
官网Demo入门
Manifest配置文件
实现思路
核心代码
实现效果
不知道大家有没有过类似的经历，查阅资料时经常会打开一堆临时tab标签，不至于到要加入收藏夹的地步，但是直接关了再找又麻烦，而且挤挤挨挨的一堆找起来也很费眼睛…

手摸手教你写个chrome插件
有没有什么工具能保存下我打开的tab，并且能方便地查看？

受到印象笔记剪藏插件的启发，我找到了个插件OneTab，可以一键关闭所有标签页并保存到一个页面中：
手摸手教你写个chrome插件
出于好奇，我去了解了下：如何写一个chrome插件？

再次打开一堆tab…

写一个chrome插件需要的技术基础：html、js、css。

？？？就这？这不就是我前端切图仔的三板斧吗？！

话不多说，直接开撸！

需求分析
首先分析我的需求：

保存打开的网页地址；
看完后可以便捷地删除；
最好能一键全部保存；
再来个一键删除；
再来个一键全开；
…

打住打住，先完成核心需求再说= =。

官网Demo入门
依据官网上的指示，插件应包含以下文件：

一个manifest文件（配置文件）
一个或多个HTML文件（除非这个应用是一个皮肤）
可选的一个或多个JavaScript文件
可选的任何需要的其他文件，例如图片
除了manifest不知道是啥，其他都是熟悉的配方。谷歌官方还很贴心地给出了入门demo：https://storage.googleapis.com/chrome-gcs-uploader.appspot.com/file/WlD8wC6g8khYWPJUsQceQkhXSlv1/SVxMBoc5P3f6YV3O7Xbu.zip

下载下来后可以看到有这么几个文件：
手摸手教你写个chrome插件
打开chrome，右上角扩展操作>更多工具>扩展程序，点击加载已解压的扩展程序，选中上面的文件夹，就可以看到加载进来的demo插件。

Manifest配置文件
我们先来看看demo里的manifest.json配置：

{
  "name": "Getting Started Example",
  "description": "Build an Extension!",
  "version": "1.0",
  "manifest_version": 3,
  "background": {
    "service_worker": "background.js"
  },
  "permissions": ["storage", "activeTab", "scripting"],
  "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"
  },
  "options_page": "options.html"
}

配置说明

本次需要的permissions有：
tabs：访问tab页；
storage：存取缓存；
unlimitedStorage：无限缓存。
更多权限配置说明见官网：https://developer.chrome.com/docs/extensions/mv2/declare_permissions/#manifest
action这里我用的是清单版本2中的browser_action，版本3中的action无法弹出popup选项卡，估计是我用的姿势不太对…（有知道的童鞋可以留言告诉我怎么用~）
修改后的配置文件：

{
    "manifest_version": 3,
    "name": "阅读TODO清单",
    "version": "1.0.0",
    "description": "一键保存tab，轻松管理临时标签页",
    "icons":
    {
        "16": "images/icon.png",
        "48": "images/icon.png",
        "128": "images/icon.png"
    },
    "browser_action":
    {
        "default_icon": "images/icon.png",
        "default_title": "阅读清单-by 游走走",
        "default_popup": "popup.html"
    },
    "permissions":
    [
        "tabs",
        "storage",
        "unlimitedStorage"
    ],
    "options_page": "options.html",
    "homepage_url": "https://github.com/youzouzou/my-chrome-plugin-read-todo"
}

homepage_url：扩展程序网站，这里指向了我的github开源地址:)
实现思路
TODO清单这种小玩意儿就不多说了，简单来讲就是维护一个数组，并通过本地缓存get/set来实现增删改查。

核心代码
file
讲完了配置，接下来就是我们熟悉的html/js/css三板斧了。

在popup.html里我定义了三个按钮：加入阅读清单、查看清单、加入所有打开tab。

<div id="addBtn">加入阅读清单</div>
<div id="viewBtn">查看清单</div>
<div id="addAll">加入所有打开tab</div>

监听按钮点击事件：

const addBtn = document.getElementById("addBtn")
addBtn.addEventListener("click", async () => { });

加入阅读清单
加入阅读清单是将当前tab的url和title保存到缓存数组中，这里就涉及到3个chrome的API。

获取当前tab的url和title

chrome.tabs.getSelected(null, function (tab) {
  console.log(tab.url, tab.title)
});

获取当前缓存的tab数组

chrome.storage.sync.get("tabs", ({ tabs }) => { });

更新缓存中的tab数组

chrome.storage.sync.set({ "tabs": newTabList });

查看清单

viewBtn.addEventListener("click", async () => {
  window.open(chrome.extension.getURL('list.html'));
});

这里会打开一个新的tab页，指向的是list.html文件。我在这个页面展示了缓存的tab数组，并提供了单个url打开/删除、一键全部打开/删除的功能。

加入所有打开tab
这里和加入单个tab差不多，只不过需要多调一个API来获取所有窗口的所有tab：

chrome.windows.getAll({ populate: true }, function (windows) {
      windows.forEach(function (window) {
        window.tabs.forEach(function (tab) {
          // 遍历到所有tab
        });
      });
});

核心代码基本就是这几个API，具体实现可以参照demo：https://github.com/youzouzou/my-chrome-plugin-read-todo

感兴趣的同学可以下载demo，加载已解压的扩展程序，就可以看到具体的实现效果。打包成.crx文件也很简单，打开扩展程序，点击打包扩展程序：
手摸手教你写个chrome插件
还可以注册开发者账号，将开发好的插件上传到chrome网上应用商店供其他用户购买和下载(发家致富的路子又多了一个有木有~)。