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

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. 移动端目标识别(３)——使用TensorFlow Lite将tensorflow模型部署到移动端(ssd)之Running on mobile with TensorFlow Lite　（写的很乱，回头更新一个简洁的版本）

    承接移动端目标识别(2) 使用TensorFlow Lite在移动设备上运行         在本节中,我们将向您展示如何使用TensorFlow Lite获得更小的模型,并允许您利用针对移动设备优化 ...

  2. 4、promise

    es5 中 var obj = { ajax: function (callback) { console.log('执行') setTimeout(function () { callback &a ...

  3. SSM商城项目（十二）

    1.   学习计划 1.购物车实现 2.未登录状态下使用购物车 3.登录状态下使用购物车 2.   购物车的实现 2.1. 功能分析 1.购物车是一个独立的表现层工程. 2.添加购物车不要求登录.可以 ...

  4. MySQL 自带4个默认数据库

    默认数据库分类: information_schema performance_schema mysql test informance_schema 保存了MySQl服务所有数据库的信息. 具体My ...

  5. saver.restore()遇到的错误

    运行python程序执行  saver.restore(sess,"E:/pythonFile/untitled/deepLearning/model/model.ckpt")   ...

  6. Collections与Collection

    Collection是集合体系的最顶层,包含了集合体系的共性 Collections是一个工具类,方法都是用用Collection Collections方法: //static int binary ...

  7. regex正则表达式学习

    正则表达式 动机1. 处理文本成为计算机常见工作之一2. 对文本内容的搜索提取是一项比较复杂困难的工作3. 为了快速方便处理上述问题,正则表达式技术诞生,主键发展为一个被众多语言使用的独立技术 定义: ...

  8. webpack优化以及node版本

    最近做的这个项目webpack用的是1.X的版本,真的非常多的坑,然后最近在疯狂的做优化: 事情的起因是每次我npm run dev的时侯都需要5分钟+,这个速度真的是难以忍受,然后就尝试去做项目的优 ...

  9. centos7修改系统语言

    编辑文件:vim /etc/locale.conf LANG="en_US.UTF-8"    ##表示为英文 LANG="zh_CN.UTF-8"    ## ...

  10. 微信小程序日历面板插件

    创建日历面板组件,在components目录下创建calendar文件夹 1.calendar.js // components/calendar/calendar.js var util = req ...