Chrome插件开发

概况

现阶段的chrome的应用商店中，将插件（这里说的插件指代chrome应用的所有分类，下文亦同）分为如下几种，包括应用、游戏、扩展程序、主题背景。而且插件的种类多种多样，保罗万象，基本上都能找到你想要的功能的插件。

官方参考api

https://developer.chrome.com/docs/extensions/mv3/messaging/

项目目录

• manifest.json是整个插件的功能及文件配置清单，非常重要。
• static目录是放置整个插件的静态资源文件的，包括css、js、图片等等资源
• template目录是放置整个插件的功能页面模板的。
• _locales目录是放置整个插件的国际化语言脚本的。

一般来说，清单文件manifest.json文件是必须的，且必须放在插件开发目录的根目录上。其他的目录都可以自定义。

重要执行环境

background.js

如果我们开发electron客户端,chrome插件,需要一个后台执行环境, 就是安装好插件一直在运行的js脚本

popup.html

插件主页面已经脚本开发,用于显示插件主要页面和交互按钮

组件通信

background和popup之间的通信

popup.js

 var bg = chrome.extension.getBackgroundPage();
    bg.print();

background

function print() {
  console.log("%c%s", "color: #00a3cc", "已收到来自popup的命令运行bg方法");
  //background.js
  var views = chrome.extension.getViews({ type: "popup" });
  if (views.length > 0) {
    // 相当于popup的windows对象
    console.log('%c%s', 'color: #aa00ff', "抓取到popup页面上的数据");
    console.log(views[0], views[0].location.href);
  }
}

background和内容脚本通信

后台调试控制台发送信息

window.postMessage({type:'MsgFromPage', msg: 'Hello, I am page.'}, '*');

bg接受信息

window.addEventListener("message", (event)=> {
  if (event.source != window) {
      console.log(event.data, "event.source === window");
      return
  }
  console.log(event.data, "message");
}, false)

消息通知

有chrome的api工具可调用

  chrome.notifications.create(null, {
      type: "basic",
      iconUrl: "/images/icon.png",
      title: "kubor 提醒您",
      message: "一起来喝一杯水吧, 干杯🍻",
    });