由于扩展标准的逐渐一致, 现在同一扩展代码库已经有可能同时用于Chrome和火狐. 下面是一个简单的工具栏按钮和弹窗(尚无任何实际功能):

代码库地址: nobodxbodon/suan1

所有代码:

manifest.json:

{

  "manifest_version": 2,

  "name": "算一",

  "version": "0.0.1",

  "description": "工具栏按钮, 弹窗中包含计算器",

  "homepage_url": "https://github.com/nobodxbodon/suan1",

  "icons": {

    "48": "图标/算-48.png",

    "96": "图标/算-96.png"

  },

  "permissions": [],

  "browser_action": {

    "default_icon": "图标/算-32.png",

    "default_title": "算一",

    "default_popup": "弹窗/主界面.html"

  }

}

弹窗/主界面.html

<!DOCTYPE html>

<html>

  <head>

    <meta charset="utf-8">

    <link rel="stylesheet" href="主界面.css"/>

  </head>

<body>

  <div class="按钮">你好</div>

  <script src="主界面.js"></script>

</body>

</html>

弹窗/主界面.css

html, body {

  width: 100px;

}

.按钮 {

  margin: 3% auto;

  padding: 4px;

  text-align: center;

  font-size: 1.5em;

  cursor: pointer;

}

待续...

2018-07-10 为Chrome和火狐浏览器编写扩展的更多相关文章

  1. 2018.07.10 NOIP模拟 sort（单调队列）

    Sort 题目背景 SOURCE:NOIP2016-RZZ-4 T1 题目描述 给你一个长度为 n 的排列,小W每次可以选择一个数,做以下操作: 不断把这个数与它右边的数交换. 当它右边没有数,或它右 ...

  2. 研发环境 chrome谷歌浏览器和firefox火狐浏览器解决跨域问题

    1 火狐浏览器 (1).先在地址栏输入about:config,然后单击“我了解此风险”. (2).找到security.fileuri.strict_origin_policy,然后在值下面的tru ...

  3. 谷歌浏览器和火狐浏览器设置跨域和https、http混用 Chrome

    谷歌浏览器和火狐浏览器设置跨域和https.http混用 Chrome    添加启动项: 右键点击Chrome快捷方式,在目标一栏后添加启动项 允许跨域: --disable-web-securit ...

  4. Google Chrome谷歌/火狐/Safari浏览器开发者工具基本使用教程

    前言 在阅读下面内容之前,那么些简单的了解浏览器开发者工具到底是什么东西,到底有什么用途. 浏览器开发者工具到底是什么? 其实简单的说,浏览器开发者工具就是给专业的web应用和网站开发人员使用的工具, ...

  5. Chrome和Firefox浏览器执行new Date() 函数传参数得到不同结果的陷阱

    某日,同事问到关于new Date() 函数传参数,在火狐浏览器和谷歌浏览器控制台运行,会得到不同的结果,刚开始觉得不可能,后来实际操作才发现此陷阱 var date = new Date('2014 ...

  6. 火狐浏览器对svg支持的一点不足

    项目中要用svg实现一个如下图所示的风机扇叶转动效果 当用chrome浏览器打开,动画显示正常.用火狐浏览器打开扇叶静止不动,代码如下: <svg xmlns:cge="http:// ...

  7. 兼容IE，chrome 等所有浏览器 回到顶部代码

    今天在博客园看到一片帖子回到顶部代码,索性就看了下,但是发现在非IE浏览器下可以运行,在IE浏览器下却运行不了. 故将其代码搬弄过来做了些许修改后,完美支持了IE下的运行. 主要实现功能代码文件: & ...

  8. 使用火狐浏览器模仿手机浏览器，附浏览器HTTP_USER_AGENT汇总

    HTTP_USER_AGENT用来获取浏览页面的访问者在用什么操作系统(包括版本号)浏览器(包括版本号)和用户个人偏好. 改变浏览器的这个参数就可以伪装成相应的浏览器. User Agent Swit ...

  9. Chrome和火狐插件让数以百万计用户隐私数据泄露

      https://tech.163.com/19/0721/12/EKK1PRAU00097U7R.html   网易科技讯7月21日消息,据国外媒体报道,流行浏览器诸如广告拦截等扩展功能,已经遭利 ...

随机推荐

  1. Eclipse Debug调试遇到的问题

    在使用Debug模式前,一定要先打好断点.快捷调试方法:   在使用过程中,可以只保留Console,Variables,Debug窗口,把其他无用的窗口最小化掉,或者删掉即可.如果要恢复删掉的试图, ...

  2. jdk源码阅读笔记-String

    本人自学java两年,有幸初入这个行业,所以功力尚浅,本着学习与交流的态度写一些学习随笔,什么错误的地方,热烈地希望园友们提出来,我们共同进步!这是我入园写的第一篇文章,写得可能会很乱. 一.什么是S ...

  3. Python3|ddt|unittest|浅议数据驱动测试

    目录 1.DDT简介 2.data装饰器 3.unpack装饰器 4.file_data装饰器 5.总结 1.DDT简介 Data-Driven Tests(DDT)即数据驱动测试.它允许您通过不同的 ...

  4. 利用Asp.Net Core的MiddleWare思想处理复杂业务流程

    最近利用Asp.Net Core 的MiddleWare思想对公司的古老代码进行重构,在这里把我的设计思路分享出来,希望对大家处理复杂的流程业务能有所帮助. 背景 一个流程初始化接口,接口中根据传入的 ...

  5. jQuery拼图小游戏

    jQuery拼图小游戏 最后样式 核心代码部分 <script type="text/javascript" > $(function () { $("td& ...

  6. myeclipse附加源码进行查看的方法

    在编程过程中,有可能需要用到看源码的情况,那么怎么进行添加源码呢,这里做下记录 首先,先下载javaEE源码(可在网上自由下载) 1.在HttpServlet上右键-->Open Declara ...

  7. C# 填充Excel图表、图例背景色

    填充背景色,一般可以选择多种不同样式来填充背景,包括填充为纯色背景.渐变背景.图片背景或者纹理背景等.下面的内容将分别介绍通过C#来设置Excel中图表背景色.以及图表中的图例背景色的方法. 使用工具 ...

  8. HTML 练习清除浮动 :after

    为 clearfix 类所在的 div 内部最后处添加一个 div 标签,内容为 . ,高度为0, 隐藏 <!DOCTYPE html> <html lang="en&qu ...

  9. 一款Android图文识别与扫描软件

    OCR图文识别App 是一款准确高效的 OCR文字识别与扫描软件,识别准确度高,速度快,扫描文件清晰,可导出TXT.Excel. 免费使用. 技术 基于百度在业界领先的人工智能与深度学习技术,提供对身 ...

  10. 使用d3.v5实现条形图

    效果图: 条形图: 目录结构: <!DOCTYPE html> <html lang="en"> <head> <meta charset ...