Vue+chrome-extension-cli开发谷歌浏览器扩展程序

兔十三
713 阅读3分钟

上班摸鱼真的太累了，准备面试又感觉在上班的时候静不下心，突发奇想写个小插件，简单实现获取当前页面图片并导出excel文档的小功能。

首先根据官方网站的指示简单创建一个像文件夹，并配置几个文件，如下图

image.png

其中images文件里面主要是插件的图标。

background.js是插件加载的时候会执行的脚本，一般情况下，会在里面初始化一些事件，例如绑定插件按钮点击事件，当点击插件按钮的时候在指定页面（tabId必传）注入content.js脚本。

chrome.runtime.onInstalled.addListener(() => {
  console.log('Extension installed');
});
chrome.action.onClicked.addListener((tab) => {
  chrome.scripting.executeScript({
    target: {tabId: tab.id},
    files: ['content.js']
  });
});

对于指定页面注入的content.js脚本文件内，可以对写一些对当前页面进行操作的一些逻辑，当在当前页面点击插件按钮的时候就会执行。

console.log('hello world content todo something~')

popup.html文件主要是在点击插件按钮时的弹框文件，类似下图。

image.png

<!DOCTYPE html>
<html>
  <head><title>My Extension Popup</title></head>
  <body>
      <h1>Hello World</h1>
  </body>
</html>

然后主要在于配置文件manifest.json，以下是一些基本配置。

{
  "manifest_version": 3,//版本号，现在都是3
  "name": "getImagesToExcel",//插件名称
  "version": "1.0",//这个指的是你自己的插件的版本
  "description": "A basic extension example.",//插件的说明
  "permissions": ["scripting", "activeTab"],//声明插件需要的权限
  "background": {
    "service_worker": "background.js"
  },//插件加载时加载的脚本
  "action": {
    "default_icon": {
      "16": "images/icon16.png",
      "48": "images/icon48.png",
      "128": "images/icon128.png"
    }
  },
  "icons": {
    "16": "images/icon16.png",
    "48": "images/icon48.png",
    "128": "images/icon128.png"
  }//插件的图标，对应不同大小可以设置不同的图片，也可以只设置一个
}

当文件里已经具备了以上文件及配置，就可以直接在浏览器的扩展程序管理里面加载我们的本地文件了。

image.png

官方文档中提供的api有很多，但是由于我需要使用sheet.js，因此我选择了使用vue3有包管理工具可以更方便的加载需要的依赖，更方便地实现更多功能。developer.chrome.google.cn/docs/extens… （官方开发api）

首先创建一个vue3项目
vue create 'myextension'
安装chrome-extension-cli，可以快速初始化一个新的 Chrome 扩展项目，解放双手，不需要自己再去重写打包！！！
vue add chrome-extension-cli

安装的时候填写和选择一些基本的信息即可。

image.png 安装成功后，在src文件夹下会自动生成相关配置文件。

image.png

此时直接执行npm run build，将打包好的dist文件夹，加载到扩展程序管理，就可以了。

image.png

开发的过程中，踩的一个小坑tip一下下。

由于我开发的插件不需要弹框和具体页面展示，在刚开始的时候我直接把manifest.json文件里面的action里面的所有内容都清空了，发现就算在background.js配置了相应的点击注入事件也不会注入执行脚本。 首先是初始化的manifest.json配置当中没有配置permissions，所以这个要先配置scripting，不然注入脚本的方法用不了。其次就是如果不需要弹框，不要直接清空action配置，将default_popup设置为空即可。

新手开发，查询不少文章才勉强实现自己想要的功能，本文主要简单记录一些流程留个档，同时在开发过程中确实发现有一些坑，也是站在我浅薄的角度分享一下，也是第一次写文章，望各位大佬轻喷。过程中踩了不少坑，也发现某些知识点的缺陷，不多说了，含泪学习去了~

avatar
文章
阅读
粉丝