chrome 插件 html代码,【chrome 插件一】开发一个简单chrome浏览器插件

chrome 之所以越来越好用，很大一部分原因归功于功能丰富的插件；对于chrome忠实用户来说，了解和开发一款适合自己的chrome插件，确实是一件很cool的事情。

了解chrome 插件

chrome 插件个人理解：就是一个html + js +css + image的一个web应用；不同于普通的web应用，chrome插件除了兼容普通的js，json，h5等api，还可以调用一些浏览器级别的api，例如收藏夹，历史记录等。

开始写第一个插件

文件结构

一个简单的demo，文件目录如下

和普通的web文件没有什么区别，简单介绍下

html:存放html页面

js :存放js

locales ：存放了一个多语言的兼容【可无】

image ：放了两张图片【初期图标】

manifest ：核心入口文件

写一个manifest

直接上代码：

{

"name": "hijack analyse plug",

"version": "0.0.1",

"manifest_version": 2,

// 简单描述

"description": "chrome plug analyse and guard the http hijack",

"icons": {

"16": "image/icon16.png",

"48": "image/icon48.png"

// 选择默认语言

"default_locale": "en",

// 浏览器小图表部分

"browser_action": {

"default_title": "反劫持",

"default_icon": "image/icon16.png",

"default_popup": "html/test.html"

// 引入一个脚本

"content_scripts": [

{

"js": ["script/test.js"],

// 在什么情况下使用该脚本

"matches": [

"http://*/*",

"https://*/*"

// 什么情况下运行【文档加载开始】

"run_at": "document_start"

}

// 应用协议页面

"permissions": [

"http://*/*",

"https://*/*"

]

}

test.js 文件

/**

* @author: cuixiaohuan

* Date: 16/4/13

* Time: 下午8:41

(function(){

/**

* just test for run by self

console.log('begin');

})();

test.html 文件

just for test

test

运行插件

chrome 中输入：chrome://extensions

选择加载已解压的插件-》选择文件根目录即可。

效果如下：

一个基本的插件变完成了，勾选已启用，随便打开一个网页，会看到log中输出如下

点击页面上面的小图标如下图：

优化建议

一个小的插件已经完成，但是还有更多的api和有趣的事情可以去做。下面是360文档中给出一些优化建议，共勉。

确认 Browser actions 只使用在大多数网站都有功能需求的场景下。确认 Browser actions 没有使用在少数网页才有功能的场景，此场景请使用page actions。

确认你的图标尺寸尽量占满19x19的像素空间。 Browser action 的图标应该看起来比page action的图标更大更重。

尽量使用alpha通道并且柔滑你的图标边缘，因为很多用户使用themes，你的图标应该在在各种背景下都表现不错。不要不停的闪动你的图标，这很惹人反感。

chrome 插件 html代码,【chrome 插件一】开发一个简单chrome浏览器插件相关推荐

超详细带你入门开发一个超实用的浏览器插件
相信大家平时在电脑上逛掘金.知乎网站时,肯定有看到过下面超级烦人的跳转拦截确认页面虽然这种拦截的初衷是好的,但是我相信大家平时肯定不会因为有了这个拦截提醒页面,就会对即将打开的网站安全性提高自己的警 ...
帆软官方的数据工厂插件太贵了。自己开发一个简单好用。
帆软官方的数据工厂插件太贵了.自己也开发一个,先看下界面: 自己开发的现在支持HTTP,HTTPS的GET,POST请求,支持URL从配置文件读取,支持URL加密请求结果支持json,xml,支持对请 ...
python游戏最简单代码-如何利用Python开发一个简单的猜数字游戏
前言本文介绍如何使用Python制作一个简单的猜数字游戏. 游戏规则玩家将猜测一个数字.如果猜测是正确的,玩家赢.如果不正确,程序会提示玩家所猜的数字与实际数字相比是"大(high)&q ...
【Chrome浏览器插件开发】浏览器插件运行机制03之实战使用Vue.js 3 + Vite 2开发出简易的浏览器插件(含源码）
文章目录知识点: 一.使用 vite 创建项目 1.1 环境搭建 1.2 安装vite工具 1.3 创建vite项目 1.4 进入项目并安装依赖 1.5 修改端口 1.6 运行项目二.创建项目资源 ...
【小5聊】发布开发好的google浏览器插件到谷歌应用商店
将自己开发好的google浏览器插件发布到谷歌应用商店温馨提示:前提你的网络要能够上国外的网站哦,俗称翻墙 1. 注册为 Chrome 网上应用店开发者开发者控制台,点击跳转一步一步填写,就是注 ...
如何添加MySQL插件_如何开发一个自定义的MySQL插件
MySQL自带了很多插件,比如半同步插件.审计插件.密码验证插件等等,甚至MySQL存储引擎也是以插件方式实现的.MySQL开放的插件接口,为开发者开发自定义插件提供了便利.本文将介绍如何快速开发一个 ...
Android-实现一个简单的自动翻译插件
目录实现一个简单的自动翻译插件实现思路几个重要的实现方法 1.解析xml 2.写文件 3. 翻译使用实现一个简单的自动翻译插件最近在开发项目是要将Android相关的资源进行国际化,需要将 ...
开发一个简单错误记录功能小模块，能够记录出错的代码所在的文件名称和行号。
开发一个简单错误记录功能小模块,能够记录出错的代码所在的文件名称和行号. 处理:1.记录最多8条错误记录,对相同的错误记录(即文件名称和行号完全匹配)只记录一条,错误计数增加:(文件所在的目录不同,文 ...
利用WCF的callback机制开发一个简单的多人游戏模型
本文介绍了如何利用WCF和callback机制开发一个简单的多人在线游戏模型. 运行过程如下: 当game service 启动之后,若干个客户端便会自动连接到服务器.当某个客户端点击join gam ...
[译]使用 Rust 开发一个简单的 Web 应用，第 4 部分 —— CLI 选项解析
原文地址:A Simple Web App in Rust, Part 4 -- CLI Option Parsing 原文作者:Joel's Journal 译文出自:掘金翻译计划本文永久链接:g ...

chrome 插件 html代码,【chrome 插件一】开发一个简单chrome浏览器插件

test

chrome 插件 html代码,【chrome 插件一】开发一个简单chrome浏览器插件相关推荐

最新文章

热门文章