首页    技术博客    PHP教程    数据库技术    前端开发   HTML5    Nginx    php论坛
新用户注册 | 会员登录
第一PHP社区
  • PHP教程
  • 技术博客
  • 编程问答
  • PNG素材
  • 编程语言
  • 前端技术
  • Android
  • PHP教程
  • HTML5教程
  • 数据库
  • Linux技术
  • Nginx技术
  • PHP安全
  • WebSerer
  • 职场攻略
  • JavaScript
  • 开放平台
  • 业界资讯
  • 大话程序猿
加入会员，解锁专属内容
登录 极速注册
取消
热门标签 | HotTags
  • dagger
  • scala
  • require
  • list
  • 数组
  • express
  • less
  • char
  • frameworks
  • vbscript
  • iostream
  • version
  • subset
  • process
  • timezone
  • main
  • join
  • web
  • dockerfile
  • runtime
  • callback
  • bitmap
  • future
  • random
  • get
  • split
  • regex
  • sum
  • plugins
  • object
  • post
  • python
  • hook
  • spring
  • jar
  • vba
  • substring
  • node.js
  • cPlusPlus
  • foreach
  • string
  • io
  • dll
  • usb
  • solr
  • shell
  • python2
  • rsa
  • javascript
  • select
  • netty
  • hash
  • httprequest
  • schema
  • include
  • chat
  • expression
  • timestamp
  • format
  • uml
  • c语言
  • datetime
  • default
  • cmd
  • copy
  • audio
  • php5
  • input
  • command
  • ip
  • flutter
  • export
  • actionscrip
  • stream
  • fetch
  • httpclient
  • golang
  • window
  • bit
当前位置:  开发笔记 > 编程语言 > 正文

开发笔记:从零开始写一个Chrome扩展

作者：Me丶i丶晓莹丬_690 | 来源：互联网 | 2023-10-12 10:43
篇首语：本文由编程笔记#小编为大家整理，主要介绍了从零开始写一个Chrome扩展相关的知识，希望对你有一定的参考价值。

篇首语：本文由编程笔记#小编为大家整理，主要介绍了从零开始写一个 Chrome 扩展相关的知识，希望对你有一定的参考价值。


题图：By  neosiam from pexels


Google Chrome是由Google开发的一款设计简单、高效的浏览器。Chrome凭借其不凡的势力现在已经成了浏览器中的霸主占据了半壁江山。Chrome更是程序员的标配。如果你在用360浏览器什么的，对不起，我们不能做朋友。


初识Chrome 扩展

Chrome 扩展除了html、CSS、HTML外还有个重要的一个配置（入口）文件 manifest.json。Chrome扩展都包含一个Manifest文件——manifest.json，这个文件可以告诉Chrome关于这个扩展的相关信息，它是整个扩展的入口，也是Chrome扩展必不可少的部分。定义了 扩展的名称（name）、版本（version）、描述（description）、图标位置（icons）和 Manifest 版本（manifest_version）等信息。

下面是我们本次演示生成二维码扩展的入口文件









  1. // manifest.json





  2. {





  3.    "manifest_version": 2,





  4.    "name": "Ext-Qrcode",





  5.    "version": "0.1.0",





  6.    "description": "生成二维码扩展",





  7.    "icons": {





  8.        "16": "images/icon16.png",





  9.        "48": "images/icon48.png",





  10.        "128": "images/icon128.png"





  11.    },





  12.    "browser_action": {





  13.        "default_title": "Ext-Qrcode",





  14.        "default_popup": "popup.html"





  15.    }





  16. }





详细的配置参见官方文档：https://developer.chrome.com/extensions/manifest

该项目的目录结构









  1.  Ext-QRCode





  2.  |- manifest.json





  3.  |- popup.html





  4.  |- /images





  5.    |- icon16.png





  6.    |- icon48.png





  7.    |- icon128.png





popup.html













  2. lang="zh-cn">









  4.     charset="UTF-8">





  5.    





  6.    













  9.     class="wrapper">









  11.    













    • 很简单对吧，其实





  •    













  •     class="wrapper">





  •         id="qrcode" class="qrcode-box">





  •        





  •         id="url" class="input" type="text" placeholder="输入URL">





  •         id="btn" class="btn">生成二维码





  •    





  •    





  •    













    • 此时在Chrome中打开该扩展，应该可以看到和上图一样的结果了。

    为了获取当前标签页的URL，需要申请 tabs权限，在manifest.json中添加如下内容









    1.  "permissions": [





    2.    "tabs"





    3.  ]





    扩展用到的权限都需要声明在permissions中，Chrome通过 tabs方法提供了管理标签的方法与监听标签行为的事件，有关标签的 url、 title和 favIconUrl的操作（包括读取），需要声明 tabs权限。现在来看看获取到的标签页的信息









    1. chrome.tabs.getSelected(null, function(tab){





    2.  console.log(tab) // 将得到一个包含当前便器那也信息的对象





    3. })






    如何调试

    右键Chrome工具栏你的扩展会弹出一个窗口，选择审查弹出内容即可调试，但是这种方法比较低效。我们可以找到扩展的ID，然后直接访问









    1. chrome-extension://<插件ID>/插件入口html文件






    获取URL并生成二维码

    先来写个封装下生成二维码的方法









    1. function generator(url) {





    2.  new QRCode(document.getElementById("qrcode"), {





    3.    text: url,





    4.    width: 148,





    5.    height: 148,





    6.    colorDark : "#000",





    7.    colorLight : "#eee",





    8.    correctLevel : QRCode.CorrectLevel.H





    9.  });





    10. }





    获取URL生成二维码









    1. chrome.tabs.getSelected(null, function(tab){





    2.  setTimeout(function() {





    3.    generator(tab.url)





    4.  }, 0)





    5. })





    这儿用到setTimeout(fn, 0)，其作用是将相关处理函数添加到运行队列的队尾，并保证在浏览器处理完其他事件之后再运行该函数。更多请搜索了解相关内容

    从输入的URL生成二维码









    1. btn.addEventListener('click', function(){





    2.  if (url.value.trim() === '') {





    3.    url.value = '请输入URL'





    4.    return





    5.  }





    6.  qrcodeBox.innerHTML = ''





    7.  generator(url.value)





    8. }, false)





    到此，我们的Chrome 扩展就开发完了。接下来就是应用发布了，但是开发者验证需要5美元而且有点麻烦。


    一些资料

    Chrome 扩展及应用开发：来自图灵社区的免费电子书

    http://www.ituring.com.cn/book/1421

    Chrome扩展开发文档：来自360极速浏览器翻译的官方文档。

    http://open.chrome.360.cn/extension_dev/overview.html

    Chrome 插件开发官方文档：

    https://developer.chrome.com/extensions


    本文完. 


    往期精彩回顾：












    左手代码右手砖，抛砖引玉

    给点个赞，好不好啊



    • chrome
    • 扩展
    • 编程
    • go
    • 程序员
    • html
    • css
    • 文件
    • json
    写下你的评论吧 !
    会员登录 | 用户注册
    推荐阅读
    • plugins

      基于Node.js、Express、MongoDB和Socket.io的实时聊天应用开发

      基于Node.js、Express、MongoDB和Socket.io的实时聊天应用开发
      本文详细介绍了使用Node.js、Express、MongoDB和Socket.io构建的实时聊天应用程序。涵盖项目结构、技术栈选择及关键依赖项的配置。 ... [详细]
      蜡笔小新   2024-12-22 15:31:28
    • get

      Python + Pytest 接口自动化测试中 Token 关联登录的实现方法

      Python + Pytest 接口自动化测试中 Token 关联登录的实现方法
      本文将深入探讨 Python 和 Pytest 在接口自动化测试中如何实现 Token 关联登录，内容详尽、逻辑清晰，旨在帮助读者掌握这一关键技能。 ... [详细]
      蜡笔小新   2024-12-21 14:48:49
    • join

      Netflix利用Druid实现高效实时数据分析

      Netflix利用Druid实现高效实时数据分析
      本文探讨了全球领先的在线娱乐公司Netflix如何通过采用Apache Druid，实现了高效的数据采集、处理和实时分析，从而显著提升了用户体验和业务决策的准确性。文章详细介绍了Netflix在系统架构、数据摄取、管理和查询方面的实践，并展示了Druid在大规模数据处理中的卓越性能。 ... [详细]
      蜡笔小新   2024-12-23 11:10:01
    • get

      Python处理Word文档的高效技巧

      Python处理Word文档的高效技巧
      本文详细介绍了如何使用Python处理Word文档，涵盖从基础操作到高级功能的各种技巧。我们将探讨如何生成文档、定义样式、提取表格数据以及处理超链接和图片等内容。 ... [详细]
      蜡笔小新   2024-12-23 10:40:32
    • web

      使用 Spring Boot 和 Groovy 实现灵活的动态计算引擎

      本文介绍了如何利用 Spring Boot 和 Groovy 构建一个灵活且可扩展的动态计算引擎，以满足钱包应用中类似余额宝功能的推广需求。我们将探讨不同的设计方案，并最终选择最适合的技术栈来实现这一目标。 ... [详细]
      蜡笔小新   2024-12-23 09:44:54
    • object

      Java项目分层架构设计与实践

      Java项目分层架构设计与实践
      本文探讨了Java项目中应用分层的最佳实践，不仅介绍了常见的三层架构（Controller、Service、DAO），还深入分析了各层的职责划分及优化建议。通过合理的分层设计，可以提高代码的可维护性、扩展性和团队协作效率。 ... [详细]
      蜡笔小新   2024-12-22 12:14:24
    • regex

      如何在Bash中解析和提取JSON文件中的变量

      本文介绍如何从JSON格式的文件中提取数据并将其分配给Bash脚本中的变量。我们将探讨具体的命令和工具，帮助你高效地完成这一任务。 ... [详细]
      蜡笔小新   2024-12-22 10:52:03
    • less

      深入解析Serverless架构模式

      深入解析Serverless架构模式
      本文将详细介绍Serverless架构模式的核心概念、工作原理及其优势。通过对比传统架构，探讨Serverless如何简化应用开发与运维流程，并介绍当前主流的Serverless平台。 ... [详细]
      蜡笔小新   2024-12-22 09:08:56
    • object

      深入解析Java虚拟机（JVM）架构与原理

      深入解析Java虚拟机（JVM）架构与原理
      本文旨在为读者提供对Java虚拟机（JVM）的全面理解，涵盖其主要组成部分、工作原理及其在不同平台上的实现。通过详细探讨JVM的结构和内部机制，帮助开发者更好地掌握Java编程的核心技术。 ... [详细]
      蜡笔小新   2024-12-21 23:50:40
    • object

      深入解析：Android 视频处理开源框架

      本文将详细介绍多个流行的 Android 视频处理开源框架，包括 ijkplayer、FFmpeg、Vitamio、ExoPlayer 等。每个框架都有其独特的优势和应用场景，帮助开发者更高效地进行视频处理和播放。 ... [详细]
      蜡笔小新   2024-12-21 19:49:35
    • object

      JSON 解析失败问题排查

      在PHP后端开发中遇到一个难题：通过第三方类文件发送短信功能返回的JSON字符串无法解析。本文将探讨可能的原因并提供解决方案。 ... [详细]
      蜡笔小新   2024-12-21 18:39:23
    • object

      优化C++项目中的JSON处理：选择高性能的RapidJSON库

      在高并发需求的C++项目中，我们最初选择了JsonCpp进行JSON解析和序列化。然而，在处理大数据量时，JsonCpp频繁抛出异常，尤其是在多线程环境下问题更为突出。通过分析发现，旧版本的JsonCpp存在多线程安全性和性能瓶颈。经过评估，我们最终选择了RapidJSON作为替代方案，并实现了显著的性能提升。 ... [详细]
      蜡笔小新   2024-12-21 18:13:59
    • plugins

      ElasticSearch 集群监控与优化

      ElasticSearch 集群监控与优化
      本文详细介绍了如何有效地监控 ElasticSearch 集群，涵盖了关键性能指标、集群健康状况、统计信息以及内存和垃圾回收的监控方法。 ... [详细]
      蜡笔小新   2024-12-21 13:43:04
    • get

      使用Fetch进行HTTP请求的基本示例

      本文介绍了如何使用JavaScript的Fetch API与Express服务器进行交互，涵盖了GET、POST、PUT和DELETE请求的实现，并展示了如何处理JSON响应。 ... [详细]
      蜡笔小新   2024-12-22 12:55:37
    • get

      深入理解ExtJS：从入门到精通

      深入理解ExtJS：从入门到精通
      本文详细介绍了ExtJS的功能及其在大型企业前端开发中的应用。通过实例和详细的文件结构解析，帮助初学者快速掌握ExtJS的核心概念，并提供实用技巧和最佳实践。 ... [详细]
      蜡笔小新   2024-12-21 15:41:04
    author-avatar
    Me丶i丶晓莹丬_690
    这个家伙很懒，什么也没留下！
    Tags | 热门标签
    • dagger
    • scala
    • require
    • list
    • 数组
    • express
    • less
    • char
    • frameworks
    • vbscript
    • iostream
    • version
    • subset
    • process
    • timezone
    • main
    • join
    • web
    • dockerfile
    • runtime
    • callback
    • bitmap
    • future
    • random
    • get
    • split
    • regex
    • sum
    • plugins
    • object
    RankList | 热门文章
    • 1mysql在BTree上创建伪哈希索引
    • 2df du命令 查看磁盘大小
    • 3win7系统怎样设置我的文档路径？
    • 4android适配方案讲解,APP设计常识解读：android界面适配的机制
    • 5【原创】七、Hadoop 2.5.2+zookeeper高可用部署
    • 6uniapp 滑动菜单栏 点击元素居中定位
    • 7米里亚姆·佩纳（Miriam Pena）：要成为“ 12位鼓舞人心的女职工工程师”的人之一，需要做些什么？...
    • 8python的字符串内建函数9（字符串函数 python）
    • 9《龙兄鼠弟》将拍续集：阿诺·施瓦辛格回归出演
    • 10  Python入门必读的if语句嵌套方法
    • 11即时通讯 java服务端_java开源即时通讯软件服务端openfire源码构建
    • 12php怎么保留小数点两位(php去除小数点)
    • 13学计算机要专注攻克哪个科目,想要各个科目有效的提高分数？最后时间请抓住这些...
    • 14【SpringCloud】 第九篇: 服务链路追踪(Spring Cloud Sleuth)
    • 152019年互联网公司月饼颜值大比拼！
    PHP1.CN | 中国最专业的PHP中文社区 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
    Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved | 京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有