一、浏览器插件基础步骤：

1、文件最基础的配置 ：

一个manifest文件、一个或多个html文件、可选的一个或多个javascript文件、可选的任何需要的其他文件，例如图片；在开发应用（扩展）时，需要把这些文件都放到同一个目录下。发布应用（扩展）时，这个目录全部打包到一个应用（扩展）名是.crx的压缩文件中。如果使用Chrome Developer Dashboard,上传应用（扩展），可以自动生成.crx文件。

2、创建应用：

创建配置文件：manifest.json（关于版本信息等基础配置） 图标文件；

3、加载扩展： 在菜单栏选择更多工具，打开扩展程序，选择开发者模式，点击“加载已解压的扩展程序（载入正在开发的扩展程序）”按钮，选择扩展文件所在的目录文件，如果扩展应用正确，图标就会显示在地址栏右侧；

二、详细解释manifest.json文件配置：

每一个扩展、可安装的WebApp、皮肤，都有一个JSON格式的manifest文件，叫manifest.json，里面提供了重要的信息 。最基础的文件，也是最重要的文件。配置关于项目的相关信息：版本、名称、描述、图标等；

字段说明

   以下是三个必填的字段：

manifest_version：manifest文件内容格式的版本，目前版本为2，本次介绍的格式都是基于该版本的.

version：该浏览器插件的版本。

name：该浏览器插件的名称。

可选择的字段：

description：该浏览器插件的描述信息；

icons：一个或者多个图标来表示扩展；

browser_action：用 browser actions 可以在chrome主工具条的地址栏右侧增加一个图标。作为这个图标的延展，一个browser action图标还可以有tooltip、badge和popup。

浏览器插件的工具栏图标。和名称

eg：

"browser_action" : {

        "default_icon": "icons/browser_action_24.png",

        "default_title": "__MSG_extensionName__"

    }

permissions：浏览器插件需要的权限，支持正则匹配；

background：浏览器插件后端程序，大部分浏览器插件api，以及https网站都需要后端程序来完成。如：获取浏览器插件的版本号。
背景页是一个运行在扩展进程中的HTML页面。它在你的扩展的整个生命周期都存在，同时，在同一时间只有一个实例处于活动状态。

"background" : {

        "persistent" : false,

        "page": "background.html"   //自定义背景文件

    },

   "background": {

    "scripts": ["background.js"]  // 由定义的js文件自动生成背景文件，

  }

content_scripts：页面注入配置。例如：向域名为xx的注入一串输出hello world的脚本，就需要该配置，同时也需要配置拥有该域名xx的权限。
是在Web页面内运行的javascript脚本。通过使用标准的DOM，它们可以获取浏览器所访问页面的详细信息，并可以修改这些信息。

详情可以查看文档字段解释：

http://open.chrome.360.cn/extension_dev/manifest.html

三、举个栗子：

manifest.json文件配置：

{

    "name": "第一个扩展",//该插件的名称

    "version": "1.0", //该插件的版本

    "manifest_version": 2, //文件内容格式的版本，目前版本为2，本次介绍的格式都是基于该版本

    "description": "扩展", //该插件的描述信息

    "background": { //运行在扩展进程中的HTML页面,一般背景页不需要任何HTML，仅仅需要js文件,浏览器插件后端程序，大部分浏览器插件api，以及https网站都需要后端程序来完成。如：获取浏览器插件的版本号。

        "scripts": ["background.js"]

    },

    "permissions": [//内容脚本可以作用到模式匹配定义好的URL集合上

        "http://*/",

        "http://*/*",

        "https://*/",

        "https://*/*",

        "bookmarks",

        "contextMenus",

        "activeTab",

        "storage",

        "tabs",

        "cookies"

    ],

    "icons": {//一个或者多个图标来表示扩展。提供一个128x128的图标将在webstore安装时候使用。48x48的图标扩展管理页面需要。提供16x16的图标作为扩页面的fa网页图标，还将显示在实验性的扩展infobar特性上。

        "16": "img/icon-16.png",

        "24": "img/icon-32.png",

        "48": "img/icon-48.png",

        "64": "img/icon-64.png",

        "128": "img/icon-128.png"

    },

    "browser_action": {//工具栏展示的图标相关信息

        "default_icon": "img/icon.png",

        "default_title": "测试标题",//hover时出现的标题

        "default_popup": "popup.html"

    }

}

popul.html:

<!DOCTYPE html>

<html>

	<head>

		<meta charset="UTF-8">

		<title>Getting Started Extension's Popup</title>

		<style type="text/css">

			body{

			    width: 110px;

			    overflow-x: hidden;

			}

			p,h2{

				text-align: center;

			}

		</style>

	</head>

	<body>

		<div id="demo">

		</div>

		<script src="js/jquery-1.10.1.min.js" type="text/javascript" charset="utf-8"></script>

		<script src="popup.js" type="text/javascript" charset="utf-8"></script>

	</body>

</html>

popup.js文件：

$(document).ready(function(){

    var details = chrome.app.getDetails();

    var html = "<p><img src='"+details.browser_action.default_icon+"'></p>"+

            "<h2>"+details.name+"</h2>"+

            "<p>版本:v"+details.version+"</p>"+

            "<p>作者:simbaLS</p>"+

            "<p>@copyright 2018</p>";

    $("#demo").html(html);

});

效果如图：

四、打包扩展应用：

Chrome扩展插件流程的更多相关文章

  1. BlazeMeter发布chrome扩展插件，支持JMeter脚本创建

    BlazeMeter发布chrome扩展插件,支持JMeter脚本创建http://www.automationqa.com/forum.php?mod=viewthread&tid=3898 ...

  2. 自制Chrome扩展插件：用于重定向js

    前言 作为一个前端开发, 在调试生产环境的代码时,是否苦于生产环境代码被压缩,没有sourcemap? 有没有想过将生产环境的js直接重定向为本地开发环境的js? 玩微前端时,有没有想过用本地的子应用 ...

  3. 认识Chrome扩展插件

    1.前言 现如今的时代,绝大多数人都要跟浏览器打交道的,说到浏览器那肯定是Chrome浏览器一家独大,具体数据请看 知名流量监测机构 Statcounter 公布了 7 月份全球桌面浏览器市场份额,主 ...

  4. 那些离不开的 Chrome 扩展插件

    虽然Chrome浏览器是个吃内存的怪兽,但是,它却因为启动速度.调试功能等成为了程序猿的必备浏览器!今天有时间,整理一下自己最常用的一些Chrome扩展吧: 常用网页浏览非开发类扩展: Tamperm ...

  5. 17 款程序员必备 Chrome扩展插件，爱了爱了！

    整理:小哈学Java 目录 美化 Just Black 午夜黑官方主题 Dark Reader 暗黑主题 为什么你们就是不能加个空格呢? 标签管理 Momentum [新标签页] Tab Manage ...

  6. Do Chrome extensions access iframes? chrome扩展插件访问所有iframes

    32down voteaccepted Yes, a Chrome Extension "content script" can run in all iframes (that ...

  7. chrome 扩展插件提示

    --force-fieldtrials=ExtensionDeveloperModeWarning/None/ ogfahjpoemnbbnlignjbfinfnahmfdlk ahjaciijnoi ...

  8. 有哪些可以节省chrome内存的扩展插件？

    不知道从什么时候开始,chrome浏览器就这样不知不觉的超过IE浏览器成为全球第一大浏览器.我们在赞赏chrome浏览器流畅的速度时,更多的是对其chrome插件功能的赞赏.但是我们也发现了一个致命的 ...

  9. 提高工作效率的神器：基于前端表格实现Chrome Excel扩展插件

    Chrome插件,官方名称extensions(扩展程序):为了方便理解,以下都称为插件. 我们开发的插件需要在浏览器里面运行,打开浏览器,通过右上角的三个点(自定义及控制)-更多工具-拓展程序-打开 ...

随机推荐

  1. html页面通过http访问mysql数据库中的内容，实现用户登录的功能

    需求: 通过html编写用户登录页面,页面内容包括用户名.密码和登录按钮,点击登录后访问login.php文件,使用按钮默认的submit提交用户名和密码,在login.php中访问mysql数据库, ...

  2. python 的xlwt模块

    一.安装 ♦ python官网下载https://pypi.python.org/pypi/xlwt模块安装. ♦或者在cmd窗口  pip install  xlrd 二.使用 1.导入模块 imp ...

  3. Java第二周作业

    Java第二周作业 本周作业: 参考http://www.cnblogs.com/rocedu/p/7911138.html 学习第二三章视频 参考http://www.cnblogs.com/roc ...

  4. poj 2778 AC自动机+矩阵快速幂

    题目链接:https://vjudge.net/problem/POJ-2778 题意:输入n和m表示n个病毒,和一个长为m的字符串,里面只可以有'A','C','G','T' 这四个字符,现在问这个 ...

  5. P3865 【模板】ST表

    P3865 [模板]ST表 https://www.luogu.org/problemnew/show/P3865 题目背景 这是一道ST表经典题——静态区间最大值 请注意最大数据时限只有0.8s,数 ...

  6. jQuery插件的一些想法

    之前在用ant-design和MUI的时候是一个系统的插件,应有尽有,当然jQuery也有系统性的插件,最近的项目没有用,所以一些需要插件的东西,需要哪种,找哪种,然后再引入项目中,首先百度搜索这类插 ...

  7. 在Spring Boot中使用WebClient消费RESTful接口

    转载 https://www.zifangsky.cn/1343.html 参考 https://segmentfault.com/a/1190000012916413

  8. WebSocket 实现链接 发送消息

    Websocket 原理浅析地址: https://www.cnblogs.com/yuanyongqiang/articles/10457793.html 直接上代码: myWebSocket.py ...

  9. bootstrap table dataView展开行详情，p元素自动换行

    // bootstrap table 行详情展开,p元素自动换行1 .tableClass .detail-view p{ white-space: normal; }

  10. MUI 添加自定义图标（注意点）

    参考: https://blog.csdn.net/qq_39759115/article/details/79436606 注意: 1. 将这个原来的逗号改成分号 2. 这些图标的名字都可以改名字