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

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. yarn安装及node升级

    ERROR: root@debian:/home/test/keygen-radio-master/scripts# npm install -g yarn npm WARN engine yarn@ ...

  2. ECharts折线图多个折线每次只显示一条

    echart 两条折线图如何默认只显示一条,另一条隐藏呢 只需要在legend后加上, selectedMode: 'single', selectedMode [ default: true ] 图 ...

  3. STM32F401 外部中断误触发问题

    现象:调试STM32F411低功耗的时候,使用的PA1做个唤醒源,发现在没有触发EXTI的时候,MCU居然被唤醒. 原因:PA1配置成EXTI(上拉输入),经常被误触发 解决方式:将PA1配置成浮空输 ...

  4. CSS 图像高级 CSS 渐变

    CSS 渐变 CSS 渐变是在 CSS3 Image Module 中新增加的 <image> 类型. 使用 CSS 渐变可以在两种颜色间制造出平滑的渐变效果.用渐变代替图片,可以加快页面 ...

  5. svn仓库迁移

    注意事项 1.仅迁移代码.日志.版本信息,(用户.权限.配置即conf目录需要手动移动或重新配置) 2.新仓库需无代码,即新建仓库后不要进行上传操作,否则迁移可能造成冲突,导致迁移失败 操作步骤 1. ...

  6. day52类型转换 运算符 流程控制

    0.复习 1.导入 <div id="div1" onclick="this.style.color = 'red';">12345</div ...

  7. docker for mac

    MacOS上通过docker部署 docker环境准备 1.访问这里安装好docker,需要注册账号才能下载dmg安装包:https://hub.docker.com/editions/communi ...

  8. vue 存取、设置、清除cookie

    步骤: 第一步:assets目录下添加cookie.js文件 export function setCookie(c_name,value,expire) { var date=new Date() ...

  9. 19-02【mac电脑操作】最小化应用程序

    最小化应用程序 windows下很简单,直接使用windows+M即可: mac电脑下,官方建议是:option+command+m+h.但实际使用的时候,这个快捷键并不好使: 解决方案:mac系统设 ...

  10. Linux服务器上监控网络带宽的18个常用命令 zz

    Linux服务器上监控网络带宽的18个常用命令 本文介绍了一些可以用来监控网络使用情况的Linux命令行工具.这些工具可以监控通过网络接口传输的数据,并测量目前哪些数据所传输的速度.入站流量和出站流量 ...