2018-07-10 为Chrome和火狐浏览器编写扩展

简介: 为Chrome和火狐浏览器编写一个简单的扩展, 使用中文命名. Use Chinese naming when developing a simple extension for Chrome/Firefox.

由于扩展标准的逐渐一致, 现在同一扩展代码库已经有可能同时用于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;
}

待续...

相关文章
|
4月前
|
Web App开发
Win10 Chrome认不出新Emoji?两个扩展搞定显示与输入
Win10系统在Chrome中显示部分新Emoji为方框?只需安装「Emoji Swap」和「Emoji Keyboard」两个扩展,即可让旧系统正常显示并输入新Emoji,轻松解决表情显示问题,无需更换设备或升级系统。
492 1
|
5月前
|
Web App开发 搜索推荐 安全
火狐(Mozilla Firefox)浏览器安装教程,附火狐(Mozilla Firefox)安装包
火狐浏览器2025年8月最新版141.0.2发布,支持Windows、Mac、安卓系统,运行速度快,安全性高。提供离线安装包下载,支持多种网络标准,个性化定制功能丰富,安装简便,可自定义安装路径并恢复上次浏览标签,带来更流畅上网体验。
2125 6
|
Web App开发 JSON 安全
Chrome浏览器的跨域问题
【10月更文挑战第6天】
2397 123
|
12月前
|
Web App开发 人工智能 JSON
AutoMouser:AI Chrome扩展程序,实时跟踪用户的浏览器操作,自动生成自动化操作脚本
AutoMouser是一款Chrome扩展程序,能够实时跟踪用户交互行为,并基于OpenAI的GPT模型自动生成Selenium测试代码,简化自动化测试流程。
837 17
AutoMouser:AI Chrome扩展程序,实时跟踪用户的浏览器操作,自动生成自动化操作脚本
|
Web App开发 数据采集 JavaScript
Chrome浏览器实例的TypeScript自动化脚本
Chrome浏览器实例的TypeScript自动化脚本
|
Web App开发 人工智能 自然语言处理
WebChat:开源的网页内容增强问答 AI 助手,基于 Chrome 扩展的最佳实践开发,支持自定义 API 和本地大模型
WebChat 是一个基于 Chrome 扩展开发的 AI 助手,能够帮助用户理解和分析当前网页的内容,支持自定义 API 和本地大模型。
1221 1
|
Web App开发 JavaScript 前端开发
使用 Chrome 浏览器的内存分析工具来检测 JavaScript 中的内存泄漏
【10月更文挑战第25天】利用 Chrome 浏览器的内存分析工具,可以较为准确地检测 JavaScript 中的内存泄漏问题,并帮助我们找出潜在的泄漏点,以便采取相应的解决措施。
1533 9
|
Web App开发 缓存 安全
WIN11 Chrome 双击打不开闪退及Chrome浏览器不能拖拽文件crx
【11月更文挑战第6天】本文介绍了 WIN11 系统中 Chrome 浏览器双击打不开闪退及不能拖拽文件 crx 的原因和解决方法。包括浏览器版本过旧、扩展程序冲突、硬件加速问题、缓存过多、安全软件冲突、系统文件损坏、用户配置文件损坏等问题的解决方案,以及 crx 文件的屏蔽、权限问题和文件格式问题的处理方法。
3957 2
|
Web App开发 Linux iOS开发
Chrome浏览器如何导出所有书签并导入书签
【11月更文挑战第4天】本文介绍了如何在 Chrome 浏览器中导出和导入书签。导出时,打开书签管理器,点击“整理”按钮选择“导出书签”,保存为 HTML 文件。导入时,同样打开书签管理器,点击“整理”按钮选择“导入书签”,选择之前导出的 HTML 文件即可。其他主流浏览器也支持导入这种格式的书签文件。
10308 2
|
Web App开发 搜索推荐 安全