chrome插件开发入门教程(v3版)

更新日期: 2022-06-18阅读量: 41标签: 插件

教程按照官方文档给的栗子进行了本地化改良。官方文档地址: https://developer.chrome.com/docs/extensions/mv3/getstarted/#next-steps

教程里使用的文档链接均为官方链接,所以必须使用魔法上网才能看到。

插件的功能为:修改指定网站的背景颜色。完整的代码可在这里下载:下载地址

创建配置文件

首先需要一个插件的配置文件,每一个chrome的插件都需要有一个 manifest.json 配置文件,因此你可以在电脑里新建一个目录,然后在此目录里新建一个 manifest.json 并写入以下代码:

{
  "name": "myTestPlug",
  "description": "我的第一个chrome插件",
  "version": "1.0",
  "manifest_version": 3
}
  • name:插件名称
  • description:插件介绍
  • version:插件版本
  • manifest_version:使用的版本语言,目前最新的版本是v3

这个配置文件的具体详细文档地址: https://developer.chrome.com/docs/extensions/mv3/manifest/

加载插件

在开发模式下,需要打开chrome的开发者模式才可以测试自己写的插件。

打开的方法为:

chrome://extensions/

如图,你会看到刚才的插件已经被创建。因为我们没有在配置文件里定义插件的图标,因此chrome会赋予一个默认图标。

在配置文件中注册脚本

我们首先需要注册一个主js文件,可以把它看作为web应用与chrome浏览器之间的“代理服务器”,它可以监听、修改、拦截web应用的资源和请求。

编辑刚才的 manifest.json 配置文件,并在之前的基础上增加脚本,完整代码如下:

{
  "name": "myTestPlug",
  "description": "我的第一个chrome插件",
  "version": "1.0",
  "manifest_version": 3,
  "background": {
    "service_worker": "background.js"
  }
}

其中 background 指的是chrome浏览器的后台,而 service_worker 就是Google推行的渐进式网页应用(PWA)的理念之一。

这里需要注意的是, background.js 文件必须要放在插件的根目录下。

关于 service_worker 的文档地址: https://developer.chrome.com/docs/extensions/mv3/service_workers/

新建一个background.js

此时我们需要创建一个颜色变量,并且要使插件的其他页面能读取并修改这个变量,因此我们在插件的根目录下新建一个 background.js 文件,并且写入以下代码:

// background.js

// 定义颜色
let color = '#3aa757';

// 首次安装插件、插件更新、chrome浏览器更新时触发
chrome.runtime.onInstalled.addListener(() => {
  chrome.storage.sync.set({ color });
  console.log('插件默认颜色为: %c #3aa757', `color: ${color}`);
});

在以上代码里,我们首先使用到了chrome浏览器的一个生命周期的钩子 onInstalled ,这个钩子在首次安装插件、插件更新、chrome浏览器更新时触发,关于chrome浏览器的其他生命周期文档地址: https://developer.chrome.com/docs/extensions/reference/runtime/#event

其次我们使用到了chrome浏览器的一个存储api: chrome.storage ,这个API可以满足插件一定的存储需求,并且可以在插件的其他页面内随时调取使用并修改,其相关的文档地址为: https://developer.chrome.com/docs/extensions/reference/storage/

在chrome插件开发里,大部分的API都需要在 manifest.json 配置文件先注册,再使用,因此我们需要继续编辑 manifest.json ,完整代码如下:

{
  "name": "myTestPlug",
  "description": "我的第一个chrome插件",
  "version": "1.0",
  "manifest_version": 3,
  "background": {
    "service_worker": "background.js"
  },
  "permissions": ["storage"]
}

检查刚才的代码

在以上操作完成后,我们可以在插件的页面里调取控制台来检查一下刚才的代码了,我们回到扩展程序的页面,点击自己插件的“刷新”按钮,然后点击“查看视图 Service Worker”,即可打开插件的控制台,并且查看到刚才打印的文字。


制作chrome插件的弹出窗口

接下来我们需要制作一个用户界面,也就是每个chrome插件在点击时都会弹出的那个窗口。因此我们需要先创建一个 popup.html 文件,这便是弹出窗口的html页面,代码如下:

<!DOCTYPE html>
<html>
  <head>
    <link rel="stylesheet" href="popup.css">
  </head>
  <body>
    <button id="changeColor" class="color-btn"></button>
  </body>
</html>

我们在head里引用了 popup.css 文件,因此也需要同时创建一个 popup.css 文件,代码如下:

.color-btn {
  height: 30px;
  width: 30px;
  outline: none;
  margin: 10px;
  border: none;
  border-radius: 2px;
  cursor: pointer;
}

.color-btn.current {
  box-shadow: 0 0 0 2px white,
              0 0 0 4px black;
}

在配置文件里注册弹出窗口

和注册 background.js 一样,弹出窗口也必须要在 manifest.json 配置文件完成注册:

{
  "name": "myTestPlug",
  "description": "我的第一个chrome插件",
  "version": "1.0",
  "manifest_version": 3,
  "background": {
    "service_worker": "background.js"
  },
  "permissions": ["storage"],
  "action": {
    "default_popup": "popup.html"
  }
}

在这里,我们在 action API的 default_popup 中注册了刚才的弹出窗口页面, action API中还可以注册插件的图标,具体的文档链接为: https://developer.chrome.com/docs/extensions/reference/action/

图标的使用会在教程结尾处讲解。

查看弹出窗口

在完成了弹出窗口注册后,我们再次回到chrome的插件管理页面,在点击刷新后,我们将自己的插件固定在浏览器的插件工具栏中:


同时点击一下自己的插件,就会发现刚才制作好的弹出窗口:


在这里我们也可以用刚才设置好的绿色为这个按钮添加一个颜色,在这里我们需要创建一个 popup.js ,完整代码如下:

// popup.js

// 获取按钮实例
let changeColor = document.getElementById('changeColor');

// 从chrome插件的存储里读取color变量并修改按钮颜色
chrome.storage.sync.get('color', ({ color }) => {
  changeColor.style.backgroundColor = color;
});

同时我们也需要在 popup.html 中引用这个js,打开 popup.html 后,修改代码如下:

<!DOCTYPE html>
<html>
  <head>
    <link rel="stylesheet" href="popup.css">
  </head>
  <body>
    <button id="changeColor" class="color-btn"></button>
    <script src="popup.js"></script>
  </body>
</html>

再次回到chrome插件管理页面,重新加载一遍插件后即可看到绿色按钮,或者不用刷新,稍微等段时间再次点击插件也可以。

添加逻辑

接下来我们开始实现点击按钮改变目标页面背景色的功能了,因此我们需要用到两个chrome浏览器提供的API权限:

第一个是 activeTab 权限,用于使用 chrome.tabs API让插件有权限访问当前打开的标签页,对应的详细文档地址: https://developer.chrome.com/docs/extensions/reference/tabs/

第二个是 scripting 权限,用于使用 chrome.scripting API将JavaScript 和 CSS 注入网站,对应其完整的文档为: https://developer.chrome.com/docs/extensions/reference/scripting/

与 storage 权限一样,我们也需要去 manifest.json 配置文件完成注册,打开 manifest.json ,完整的代码如下:

{
  "name": "myTestPlug",
  "description": "我的第一个chrome插件",
  "version": "1.0",
  "manifest_version": 3,
  "background": {
    "service_worker": "background.js"
  },
  "permissions": ["storage", "activeTab", "scripting"],
  "action": {
    "default_popup": "popup.html"
  }
}

注册后,我们回到 popup.js ,完成对按钮的逻辑操作,完整代码如下:

// popup.js

// 获取按钮实例
let changeColor = document.getElementById('changeColor');

// 从chrome插件的存储里读取color变量并修改按钮颜色
chrome.storage.sync.get('color', ({ color }) => {
  changeColor.style.backgroundColor = color;
});

// 点击按钮
changeColor.addEventListener('click', async() => {
  // 获取当前打开的标签页面
  // 因为需要先准确地获取当前的页面才能注入js,所以这里需要使用同步函数,await
  let [tab] = await chrome.tabs.query({ active: true, currentWindow: true });

  // 向目标页面里注入js方法
  chrome.scripting.executeScript({
    target: { tabId: tab.id },
    function: setPageBackgroundColor
  });
});

// 注入的方法
function setPageBackgroundColor() {
  // 从chrome插件的存储里读取color变量并修改当前页面的body背景色
  chrome.storage.sync.get("color", ({ color }) => {
    document.body.style.backgroundColor = color;
  });
};

调试代码方法:右键点击小窗口的空白处,点击“检查”,即可打开控制台调试代码。


到此为止,一个简单的chrome浏览器插件已经完成了,可以随便打开一个网站点击绿色的小按钮尝试一下。

增加设置页面

实现了第一个小Demo后,用户就会提出新的需求,比如不满足只有一种颜色的切换,应该有一个配置页面来由用户决定使用哪些颜色。

需求,永无止境。

因此我们需要增加一个插件设置页面,与弹出窗口 popup.html 一样,插件的设置页面也需要在 manifest.json 配置文件注册一下,我们打开 manifest.json ,完整代码如下:

{
  "name": "myTestPlug",
  "description": "我的第一个chrome插件",
  "version": "1.0",
  "manifest_version": 3,
  "background": {
    "service_worker": "background.js"
  },
  "permissions": ["storage", "activeTab", "scripting"],
  "action": {
    "default_popup": "popup.html"
  },
  "options_page": "options.html"
}

同时,我们也需要创建好一个对应的 options.html 页面,完整代码如下:

<!DOCTYPE html>
<html>
  <head>
    <!-- 此处我们可以沿用popup.html的页面样式 -->
    <link rel="stylesheet" href="popup.css">
  </head>
  <body>
    <div id="colorBtns"></div>
    <script src="options.js"></script>
  </body>
</html>

此时我们需要再次回到chrome插件管理页面,重新加载一遍插件,然后右键点击我们的插件,就会发现出现了“选项”这一选项。


实现选项页面的逻辑

最后,我们需要实现一下选项的逻辑,创建 options.js 后,增加以下代码:

// options.js

let colorBtns = document.getElementById("colorBtns"); // 按钮实例
let currentClassName = 'current'; // 当前选择的颜色

const colorList = ["#3aa757", "#e8453c", "#f9bb2d", "#4688f1"];

/**
 * 设置颜色按钮
 * 
 * @param {Array} colorList 颜色列表
 * 
*/
function setColorBtns(colorList) {
  
  // 获取当前存储的颜色
  chrome.storage.sync.get('color', (data) => {

    let currentColor = data.color; // 当前已选中的颜色
    
    // 遍历颜色列表并创建按钮
    colorList.map((item) => {
      let button = document.createElement('button'); // 创建按钮
      button.dataset.color = item; // 为每个按钮设置颜色变量, 存储在dataset中, 为点击事件作参数准备
      button.style.backgroundColor = item; // 设置按钮颜色样式
      button.classList.add('color-btn'); // 设置按钮样式 - popup.css

      // 设置当前已选中的按钮
      if (currentColor === item) {
        button.classList.add(currentClassName);
      };

      // 对按钮绑定点击事件
      button.addEventListener('click', handleButtonClick);

      // 将按钮写入页面
      colorBtns.appendChild(button);

    });

  });

};

/**
 * 按钮点击事件
 * 
 * @param {Object} event 按钮本身
 * 
*/
function handleButtonClick(event) {
  
  // 删除其他按钮的选中样式
  let current = event.target.parentElement.querySelector(`.${currentClassName}`); // 从上一级dom结构里获取当前已选中的按钮
  if (current && current !== event.target) {
    // 删除按钮的选中样式
    current.classList.remove(currentClassName);
  };

  // 给当前按钮增加选中样式
  event.target.classList.add(currentClassName);
  
  // 修改当前chrome插件中存储的颜色
  let color = event.target.dataset.color; // 获取按钮中的dataset参数
  chrome.storage.sync.set({ color });
};

// 执行
// 批量添加按钮
setColorBtns(colorList);

测试

右键点击插件,选择“选项”后,会打开 options.html 页面,并且实现了4种颜色的按钮,每点击按钮后,都会影响插件弹出窗口的按钮本身的颜色及功能。

关于图标

chrome插件的图标分为两种:

第一种是用于在工具栏中显示,对应的注册地址在 manifest.json 配置文件中的 action 中 default_icon 里;

第二种则用于除了工具栏以外的其他地方,同样也在 manifest.json 配置文件中, icons 的选项里。

关于本插件,加完图标的完整代码是:

{
  "name": "myTestPlug",
  "description": "我的第一个chrome插件",
  "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"
}

将你的图标放入images文件夹内即可。

原文:https://tianbianyu.com/118/

链接: https://www.fly63.com/article/detial/11759

对于前端开发,整理推荐好用的chrome插件或应用

向web前端开发者整理提供的chrome插件或应用:比如Postman、JSON Viewer、Page Ruler 、ChromeADB 等等

使用原生js开发插件的实现方法

作为前端开发,我们都习惯使用一些开源的插件例如jquery工具库,那么如何使用原生js来开发封装一个自己的插件呢?接下来就看一下怎么去开发一个自己的js插件,先上代码

typeahead.js_jquery input 搜索自动补全jQuery插件

jquery.typeahead.js是一款高级的自动补全jQuery插件。该自动补全插件提供超过50个配置选项和回调方法,用于完成自动补全功能,能够完成绝大部分表单自动补全的需求。

js轮播插件_轮播图js代码插件总汇

这篇文章为大家分享图片轮播插件,最全最简单最通用的 幻灯片轮播插件,pc端和移动端都可完美使用,能满足绝大部分网站的轮播需求。js轮播插件包括Swiper、slick、owl carousel2、jssor/slider 、iSlider 等

ios风格的时间选择插件

在上个项目中,客户希望时间选择插件可以是ios风格的那种,但是找了很久,发现并没有用vue的ios风格时间插件,于是自己便自己造了一个轮子.插件依赖于better-scroll和vue

前端最常用的vscode插件集

在前端开发中,使用Visual Studio Code有哪些你常用的插件?推荐几个自己喜欢的,不带链接,自己搜索安装吧。这些都是比较实用、前端必备的插件集

浏览器插件_常用谷歌浏览器插件推荐

常用谷谷歌浏览器确实没有其它国产软件的内置功能丰富。但是 Google 浏览器的的优点恰恰就体现在拥有超简约的界面,以及支持众多强大好用的扩展程序,用户能够按照自己的喜好去个性化定制浏览器。今天我就给大家介绍几款自己常用的插件。

sublime安装插件

安装Sublime text 2插件很方便,可以直接下载安装包解压缩到Packages目录,也可以安装package control组件,然后直接在线安装

BlockUI详细用法_Jquery中ajax加载提示插件blickUI

BlockUI 插件是用于进行AJAX操作时模拟同步传输时锁定浏览器操作。当它被激活时,它会阻止使用者与页面(或页面的一部分)进行交互,直至它被取消。BlockUI以在DOM中添加元素的方法来实现阻止用户与浏览器交互的外观和行为

vue项目中vscode格式化配置和eslint配置冲突

使用vscode开发vue项目的时候,从远端拉下一个新的项目后,安装完依赖后跑起项目时,发现直接报了一堆语法错误:包括换行、空格、单双引号、分号等各种格式问题

点击更多...

内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!