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

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和css问题？

    1.说说你对语义化的理解?答,去掉或者丢失样式的时候能够让页面呈现出清晰的结构方便其他设备解析(如屏幕阅读器.盲人阅读器.移动设备)以意义的方式来渲染网页:便于团队开发和维护,语义化更具可读性,是下一 ...

  2. k8s Docker私有仓库认证

    使用过K8s的小伙伴肯定会遇到一个问题,我们在使用自有的Docker仓库的时候都需要先登录用户名和密码,但是如果使用K8S怎么配置密码呢?在secret中有一个类型是docker-registry我们 ...

  3. eayUi panel实现上一页下一页

    function 是为了第一次加载的时候显示页面 butt1和butt2触发上一页下一页,后面绑定参数即可 问题:.panel({href:href})到后台的时候会请求两次,这个问题还没有解决 把 ...

  4. mysql内容总体回顾

    数据类型: 数值类型: 整形 浮点型 字符串: char(定长)\varchar(不定长) char(定长):插入数据或查询数据都快,因为char在磁盘上插入数据时的存储空间是固定的,简单粗暴,直接就 ...

  5. 利用百度编辑器和IIS限制文件上传的大小

    1.百度编辑器的大小限制 针对不同的文件类型限制大小 例如图片是imageMaxSize ,依次类推 /* 前后端通信相关的配置,注释只允许使用多行方式 */ {     /* 上传图片配置项 */ ...

  6. 算法练习LeetCode初级算法之其他

    位1的个数 解法一: class Solution { // you need to treat n as an unsigned value public int hammingWeight(int ...

  7. charles修改接口返回值

    我们在测试app时,如果想看大数据量的展示情况,可以通过charles修改接口返回值来实现. 步骤1:手机连接代理 步骤2:app端请求接口,查看charles抓包情况 步骤3:选择想要修改返回值的接 ...

  8. vue动态绑定background：url绑不上的问题

    场景: 利用swipper做轮播图,在联调的时候发现有些图片存在有些图片不存在 原因:图片路径中存在 (),和 background:url() 会冲突 解决方法: 一:oss图片路径避免出现括号 ( ...

  9. 路飞ORM练习

    # a.查看所有学位课并打印学位课名称以及授课老师 # degree_list = DegreeCourse.objects.all().values('name', 'teachers__name' ...

  10. 11.Redis缓存设计

    11.Redis缓存设计11.1 缓存的收益和成本11.2 缓存更新策略11.3 缓存粒度控制11.4 穿透优化11.5 无底洞优化11.6 雪崩优化11.7 热点key重建优化11.8 本章重点回顾