Chrom插件开发：入门教程

最新推荐文章于 2024-06-19 18:43:03 发布

SunnyZhou-1024

最新推荐文章于 2024-06-19 18:43:03 发布

阅读量597

点赞数

分类专栏： Chrome插件文章标签： Chrome插件开发 extension javascript Chrome

本文链接：https://blog.csdn.net/ZM_Yang/article/details/111177454

版权

本文提供了一个逐步指南，教授如何开发一个Chrome插件，该插件能够改变developer.chrome.com的背景颜色。教程涵盖创建Manifest、添加指令、构建用户图形界面、实现逻辑以及添加用户选择功能。通过实例，读者将了解Chrome插件开发的基本组件和流程。

摘要由CSDN通过智能技术生成

插件由不相同但是内聚的组件组成，这些组件可以包括多个后台脚本、多个内容脚本、一个设置页面、多个图形用户界面元素以及其他多种逻辑文件组成。插件组件通过HTML、CSS以及JavaScript这些Web开发技术构建，组件依赖于这些Web开发技术所提供的功能，但却又不必包含其全部功能。

本教程会教你创建一个可以任意改变developer.chrome.com网站页面背景颜色的插件，在此插件中会用到许多关键组件，用于讲解每个组件以及展示各个组件之间的关系。

就让我们从创建一个保存此插件文件的目录开始此教程。你也可以从此处下载完整的插件。

创建 Manifest

插件开发都是从manifest开始的。创建一个manifest.json文件并填入一下内容，或者从此处下载该文件。

  {
   
    "name": "Getting Started Example",
    "version": "1.0",
    "description": "Build an Extension!",
    "manifest_version": 2
  }

一个包含这个manifest文件的目录此时便可以作为一个插件通过开发者模式添加到浏览器中。

通过chrome://extensions打开插件管理页面（插件管理页面也可以通过点解Chrome浏览器菜单按钮，依次选择【更多工具】【扩展程序】来打开）；
打开开发者模式开关使能开发者模式；
点击 LOAD UNPACKED 按钮并选择插件所在目录。

哒哒！插件就被安装好了，由于manifest中并未包含任何图标，因此浏览器会为其创建一个通用的图标。

添加指令

虽然插件已经安装好了，但它并未包含任何指令。通过创建一个名为background.js的文件（或者从此处下载）并放置与上面创建的目录中可以引入一个后台脚本。

后台脚本以及其他重要的组件都必须在manifest中进行注册，通过注册后台脚本可以让插件知道应该索引哪一个文件，以及该文件可用来做什么。

  {
   
    "name": "Getting Started Example",
    "version": "1.0",
    "description": "Build an Extension!",
    "background": {
   
      "scripts": ["background.js"],
      "persistent": false
    },
    "manifest_version": 2
  }

现在插件便知道它包含了一个非持久性的后台脚本，并且后扫描该脚本以便确定它该监听哪些重要的事件。

这个插件在安装好后需要从一个持久变量中获取信息，首先在后台脚本中为runtime.onInstalled设置一个监听事件，插件会在onInstalled监听函数中通过 storage API设置一个值，使得该插件的其他组件也可以访问并更新这个值。

  chrome.runtime.onInstalled.addListener(function() {
   
    chrome.storage.sync.set({
   color: '#3aa757'}, function() {
   
      console.log("The color is green.");
    });
  });

许多API（包括storage）为了让插件能使用他们，都需要在manifest中的permission字段中进行注册。

  {
   
    "name": "Getting Started Example",
    "version": "1.0",
    "description": "Build an Extension!",
    "permissions": ["storage"],
    "background": {
   
      "scripts": ["background.js"],
      "persistent": false
    },
    "manifest_version": 2
  }

回到我们刚打开的插件管理页面并点击重新加载链接，会出现一个新的字段——Inspect view，它的值变成了一个显示为background.js可点击的蓝色的链接。

点击该链接会看到该后台脚本的控制台日志：The color is green.。

引入用户图形界面

插件的用户图形界面可以有多种表现形式，但在本例中我们使用一个弹窗作为用户界面。在插件所在目录中创建一个名为popup.html的文件（你也可以从此处
下载）。此插件使用一个按钮来改变颜色。

 <!DOCTYPE html>
  <html>
    <head>

最低0.47元/天解锁文章

SunnyZhou-1024

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
Chrom插件开发：入门教程

插件由不相同但是内聚的组件组成，这些组件可以包括多个后台脚本、多个内容脚本、一个设置页面、多个图形用户界面元素以及其他多种逻辑文件组成。插件组件通过HTML、CSS以及JavaScript这些Web开发技术构建，组件依赖于这些Web开发技术所提供的功能，但却又不必包含其全部功能。本教程会教你创建一个可以任意改变developer.chrome.com网站页面背景颜色的插件，在此插件中会用到许多关键组件，用于讲解每个组件以及展示各个组件之间的关系。就让我们从创建一个保存此插件文件的目录开始此教程。你也可
复制链接

扫一扫

专栏目录