Chrome扩展插件流程

时间:2022-04-26 22:55:54

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

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扩展插件流程

Chrome扩展插件流程

四、打包扩展应用:

Chrome扩展插件流程

Chrome扩展插件流程

Chrome扩展插件流程