1. Create the manifest.json

Only three fields is needed.

{

    "name": "Getting Started Example",

    "version": "1.0",

    "manifest_version": 2,

    "description": "xx"

}

2. Add instruction (background.js)

Create and register a background.js script for manifest.json to reference.

{

    "name": "Getting Started Example",

    "version": "1.0",

    "manifest_version": 2,

    "description": "xx",

    "background": {

        "scripts": ["background.js"],

        "persistent": false

    },

    "permissions": ["storage"]

}

So, what the means of "persistent" set to false ?

The only occasion to keep a background script persistently active is if the extension uses chrome.webRequest API to block or modify network requests.

The webRequest API is incompatible with non-persistent background pages.

Most APIs, must be registered under the "permissions" field in the manifest for the extension to use them.

3. Introduce a User Interface (popup.html)

<!DOCTYPE html>

  <html>

    <head>

      <style>

        button {

          height: 30px;

          width: 30px;

          outline: none;

        }

      </style>

    </head>

    <body>

      <button id="changeColor"></button>

    </body>

  </html>

Like the background script, this file needs to be designated as a popup in the manifest under page_action.

Toolbar icon is in the default_icons under page_action.
Management page icon is in the icons field.

{

    "name": "Getting Started Example",

    "version": "1.0",

    "manifest_version": 2,

    "description": "xx",

    "background": {

        "scripts": ["background.js"],

        "persistent": false

    },

    "permissions": ["storage"],

    "page_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"

    }

}

4. Logic layer (popup.js)

<!DOCTYPE html>

<html>

    ...

  <body>

    <button id="changeColor"></button>

    <script src="popup.js"></script>

  </body>

</html>

5. Give Users Options（options.html）

Start by creating a file in the directory called options.html

Create a file called options.js in the extension directory with the logic.

<!DOCTYPE html>

  <html>

    <head>

      <style>

        button {

          height: 30px;

          width: 30px;

          outline: none;

          margin: 10px;

        }

      </style>

    </head>

    <body>

      <div id="buttonDiv">

      </div>

      <div>

        <p>Choose a different background color!</p>

      </div>

    </body>

    <script src="options.js"></script>

  </html>

Then register the options_page in the manifest,

  {

    "name": "Getting Started Example",

    ...

    "options_page": "options.html",

  }

Chrome extension：https://developer.chrome.com/extensions/getstarted

Firefox extension：https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions

Link：https://www.cnblogs.com/farwish/p/12093314.html

[FE] Chrome Extension 五步曲的更多相关文章

  1. iOS 之美：iOS Delegate 使用五步曲

    在iOS 开发中, 搞清楚Delegate 是需要花些时间的. Delegate 本来是软件架构设计的一种理念.对于像手机这样一个有限的设备,我们需要充分考虑到:内存要尽量省着用: 视图之间的关系要清 ...

  2. C语言程序设计入门学习五步曲（转发）

    笔者在从事教学的过程中,听到同学抱怨最多的一句话是:老师,上课我也能听懂,书上的例题也能看明白,可是到自己动手做编程时,却不知道如何下手.发生这种现象的原因有三个: 一.所谓的看懂听明白,只是很肤浅的 ...

  3. 工作流学习——Activiti流程变量五步曲 (zhuan)

    http://blog.csdn.net/zwk626542417/article/details/46648139 ***************************************** ...

  4. Activiti流程变量五步曲 ——by fightingKing

    http://blog.csdn.net/zwk626542417/article/details/46648139 一.前言 上一篇文章我们将流程实例的启动与查询,任务的办理查询都进行了介绍,我们这 ...

  5. 工作流学习——Activiti流程变量五步曲

    一.前言 上一篇文章我们将流程实例的启动与查询,任务的办理查询都进行了介绍,我们这篇文章来介绍activiti中的流程变量. 二.正文 流程变量与我们寻常理解的变量是一样的,仅仅只是是用在了我们act ...

  6. chrome extension overview

    目录 什么是扩展............................................................................................ ...

  7. 打包Egret游戏为Chrome extension

    今天,本来是打算做一个Chrome扩展去爬取网站base64编码图片的. 在跟着图灵社区<Chrome扩展及应用开发>敲demo代码的过程中,发现chrome的扩展的结构理论上可以兼容所有 ...

  8. SAP成都研究院安德鲁：自己动手开发一个Chrome Extension

    各位好,我叫何金鑫(He Andrew), 团队同事亲切地称呼在下为安德鲁.如果你在附近找到wifi热点名为 「安德鲁森面包房5g」,可能是我就在附近,我们可以去喝杯咖啡,聊聊最近有趣的东西. 鄙人现 ...

  9. 五步完成一个 VSCode 扩展(插件)开发

    第一步: 安装扩展生成器 npm install -g yo generator-code vsce 第二步: 初始化一个 Hello World 扩展 yo code 图来自 CN-VScode-D ...

  10. Membership三步曲之进阶篇 - 深入剖析Provider Model

    Membership 三步曲之进阶篇 - 深入剖析Provider Model 本文的目标是让每一个人都知道Provider Model 是什么,并且能灵活的在自己的项目中使用它. Membershi ...

随机推荐

  1. 不要升级！不要升级！MacOS 14.4 引发Java 应用崩溃

    如果最近您收到了MacOS 14.4的升级提醒,那么建议你暂时先不要升级! 在x上,Java开发领域的一些大v们,也发现了这个问题,并提醒大家不要升级. 根据Java官方发布的文章了解到,该问题主要是 ...

  2. VScode 配置私钥免密登录

    VScode 配置私钥免密登录 配置公钥私钥进行免密登录在前文已经提及.在完成上述配置后,我们希望在VScode中配置,毕竟主要的开发环境还是在VScode上且连接到远程服务器会经常遇到网络不稳定需要 ...

  3. Oracle的md5

    CREATE OR REPLACE FUNCTION MD5(passwd IN VARCHAR2) RETURN VARCHAR2 IS retval varchar2(32); BEGIN ret ...

  4. KingbaseES V8R6 集群运维案例 -- 脚本部署集群后ssh无法连接

    案例说明: 在kylin V10环境下,通过脚本方式部署KingbaseES V8R6集群后,发现ssh无法连接主机,通过分析发现在脚本部署过程中会对系统环境进行优化配置,在修改了/etc/ssh/s ...

  5. KingbaseESV8R6中查看索引常用sql

    前言 KingbaseES具有丰富的索引功能,对于运行一段时间的数据库,经常需要查看索引的使用大小,使用状态等. 尤其重复索引的存在,有时会因为索引过多而造成维护成本加大和减慢数据库的运行速度. 下面 ...

  6. 运维排查 | Systemd 之服务停止后状态为 failed

    哈喽大家好,我是咸鱼. 我们知道 CentOS 7 之后,Systemd 代替了原来的 SystemV 来管理服务,相比 SystemV ,Systemd 能够很好地解决各个服务间的依赖关系,还能让所 ...

  7. #分治#洛谷 5502 [JSOI2015]最大公约数

    题目 分析 又是一道思维题,考虑用分治,选取左边或右边的基准尽量扩展长度,时间复杂度\(O(nlog_2n)\) 代码 #include <cstdio> #include <cct ...

  8. #线段树，组合计数，二项式定理#CF266E More Queries to Array

    洛谷传送门 CF266E传送门 分析 首先区间修改区间查询首选线段树 要找突破口,\((i-l+1)^k\)中\(i\)不是定值, 显然得拆开,而且\(k\)很小,根据二项式定理, \[\sum_{i ...

  9. #深搜，期望#CF105B Dark Assembly

    洛谷题目传送门 CODEFORCES传送门 分析 题目强调贿赂要在投票开始前完成说明分糖和成功率可以分开计算 那么分糖考虑直接暴搜,由于题目并没有说糖必须全部分完, 所以每一次分完一颗糖后均要求当前状 ...

  10. 搜索引擎优化指南：SEO关键字、长尾关键字、短尾关键字以及反向链接

    内容 SEO SEO 代表"搜索引擎优化".它是一种数字营销策略,旨在提高网站或网页在搜索引擎未付费结果中的在线可见性.通常,网站在搜索结果页面中排名越高,或在搜索结果列表中显示的 ...