由于扩展标准的逐渐一致, 现在同一扩展代码库已经有可能同时用于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. 为什么range不是迭代器？range到底是什么类型？

    迭代器是 23 种设计模式中最常用的一种(之一),在 Python 中随处可见它的身影,我们经常用到它,但是却不一定意识到它的存在.在关于迭代器的系列文章中(链接见文末),我至少提到了 23 种生成迭 ...

  2. win10安装gitLab

    从控制面板选择hyper-V进行安装 1.打开控制面板选择程序=>选择启用或关闭windows功能=>选择Hyper-v 安装ubuntu 1.下载ubuntu系统(本次安装为18.04. ...

  3. 第15章 时间常数字符串比较 - IdentityModel 中文文档(v1.0.0)

    在比较安全上下文中的字符串(例如比较键)时,应尽量避免泄漏时序信息. 该TimeConstantComparer类可以帮助: var isEqual = TimeConstantComparer.Is ...

  4. Oracle 中的SELECT 关键字（查询、检索）

    1. SELECT 关键字用法: 检索单个列:select 列名 from 表名: 例:select ename from emp;检索多个列: select [列1,列2, ... ,列N] fro ...

  5. C# 插入超链接到PDF文档（3种情况）

    超链接可以实现不同元素之间的连接,用户可以通过点击被链接的元素来激活这些链接.具有高效.快捷.准确的特点.本文中,将分享通过C#编程在PDF文档中插入超链接的方法.内容包含以下要点: 插入网页链接 插 ...

  6. PHP开发模式之-单例模式

    1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 class  Db{ private function __construct(){} private static ...

  7. Html5知识点

    学习资料:http://how2j.cn/p/1036 周期:3天 github:https://github.com/BenCoper/Html5欢迎大家去Star以及Fork 总结:采用的都是ht ...

  8. redis-dump实现redis库迁移

    最近公司有切换redis库的需求,找了个简单的redis迁移方法,不过也有缺点.就是对于实时性要求很高的redis库迁移无法做到数据的实时同步.不过对于简单的redis库备份和迁移还是可以的,各位看官 ...

  9. C++基础——类继承

    一.前言  好吧,本系列博客已经变成了<C++ Primer Plus>的读书笔记,尴尬.在使用C语言时,多通过添加库函数的方式实现代码重用,但有一个弊端就是原来写好的代码并不完全适用于现 ...

  10. 第七周LINUX学习笔记

    HTTP的基本操作 3月17资源子网和通信子网套接字:两类    socket:IP port             IP:port            Ip.port unix sock:基于文 ...