首页    技术博客    PHP教程    数据库技术    前端开发   HTML5    Nginx    php论坛
新用户注册 | 会员登录
第一PHP社区
  • PHP教程
  • 技术博客
  • 编程问答
  • PNG素材
  • 编程语言
  • 前端技术
  • Android
  • PHP教程
  • HTML5教程
  • 数据库
  • Linux技术
  • Nginx技术
  • PHP安全
  • WebSerer
  • 职场攻略
  • JavaScript
  • 开放平台
  • 业界资讯
  • 大话程序猿
加入会员，解锁专属内容
登录 极速注册
取消
热门标签 | HotTags
  • const
  • range
  • httpclient
  • list
  • schema
  • usb
  • netty
  • rsa
  • command
  • dockerfile
  • include
  • window
  • cSharp
  • match
  • grid
  • datetime
  • string
  • stream
  • instance
  • php7
  • emoji
  • search
  • frameworks
  • javascript
  • join
  • yaml
  • controller
  • keyword
  • random
  • timezone
  • web
  • typescript
  • input
  • web3
  • sum
  • erlang
  • fetch
  • integer
  • merge
  • metadata
  • actionscrip
  • jar
  • bash
  • uri
  • loops
  • io
  • express
  • testing
  • php8
  • timestamp
  • dll
  • function
  • substring
  • process
  • scala
  • cPlusPlus
  • heap
  • python3
  • blob
  • split
  • php
  • plugins
  • regex
  • hashset
  • select
  • php5
  • shell
  • foreach
  • main
  • audio
  • python2
  • client
  • settings
  • copy
  • install
  • export
  • java
  • default
  • chat
当前位置:  开发笔记 > 编程语言 > 正文

开发笔记:从零开始写一个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
    写下你的评论吧 !
    会员登录 | 用户注册
    推荐阅读
    • list

      Python3爬虫入门：pyspider的基本使用[python爬虫入门]

      Python3爬虫入门：pyspider的基本使用[python爬虫入门]
      Python学习网有大量免费的Python入门教程，欢迎大家来学习。本文主要通过爬取去哪儿网的旅游攻略来给大家介绍pyspid ... [详细]
      蜡笔小新   2024-11-22 18:00:41
    • random

      基于SSM框架的在线考试系统：随机组卷功能详解

      基于SSM框架的在线考试系统：随机组卷功能详解
      本文深入探讨了基于SSM（Spring, Spring MVC, MyBatis）框架构建的在线考试系统中，随机组卷功能的设计与实现方法。 ... [详细]
      蜡笔小新   2024-11-22 19:00:26
    • join

      利用Node.js实现PSD文件的高效切图

      利用Node.js实现PSD文件的高效切图
      本文介绍了如何通过Node.js及其psd2json模块，快速实现PSD文件的自动化切图过程，以适应项目中频繁的界面更新需求。此方法不仅提高了工作效率，还简化了从设计稿到实际应用的转换流程。 ... [详细]
      蜡笔小新   2024-11-22 13:21:24
    • join

      WebBenchmark：强大的Web API性能测试工具

      WebBenchmark：强大的Web API性能测试工具
      本文介绍了一款名为WebBenchmark的Web API性能测试工具，该工具不仅支持HTTP和HTTPS服务的测试，还提供了丰富的功能来帮助开发者进行高效的性能评估。 ... [详细]
      蜡笔小新   2024-11-23 05:24:11
    • string

      从迷茫到收获：阿里腾讯实习Offer的求取之路

      本文回顾了作者在求职阿里和腾讯实习生过程中，从最初的迷茫到最后成功获得Offer的心路历程。文中不仅分享了个人的面试经历，还提供了宝贵的面试准备建议和技巧。 ... [详细]
      蜡笔小新   2024-11-22 19:32:32
    • include

      Ubuntu 14.04 环境下搭建 Caffe（仅限 CPU）

      本文详细介绍了如何在 Ubuntu 14.04 系统上搭建仅使用 CPU 的 Caffe 深度学习框架，包括环境准备、依赖安装及编译过程。 ... [详细]
      蜡笔小新   2024-11-22 16:43:30
    • window

      JavaScript 跨域解决方案详解

      JavaScript 跨域解决方案详解
      本文详细介绍了JavaScript在不同域之间进行数据传输或通信的技术，包括使用JSONP、修改document.domain、利用window.name以及HTML5的postMessage方法等跨域解决方案。 ... [详细]
      蜡笔小新   2024-11-22 16:27:56
    • window

      Vue CLI 基础入门指南

      Vue CLI 基础入门指南
      本文详细介绍了 Vue CLI 的基础使用方法，包括环境搭建、项目创建、常见配置及路由管理等内容，适合初学者快速掌握 Vue 开发环境。 ... [详细]
      蜡笔小新   2024-11-22 14:48:35
    • const

      Spring MVC 中利用拦截器与自定义注解实现权限控制

      本文探讨了如何在 Spring MVC 框架下，通过自定义注解和拦截器机制来实现细粒度的权限管理功能。 ... [详细]
      蜡笔小新   2024-11-22 14:35:02
    • random

      为何Compose与Swarm之后仍有Kubernetes的诞生？

      为何Compose与Swarm之后仍有Kubernetes的诞生？
      探讨在已有Compose和Swarm的情况下，Kubernetes是如何以其独特的设计理念和技术优势脱颖而出，成为容器编排领域的领航者。 ... [详细]
      蜡笔小新   2024-11-22 09:26:11
    • list

      深入探讨前端代码优化策略

      深入探讨前端代码优化策略
      本文深入讨论了前端开发中代码优化的关键技术，包括JavaScript、HTML和CSS的优化方法，旨在提升网页加载速度和用户体验。 ... [详细]
      蜡笔小新   2024-11-21 10:57:01
    • usb

      新浪微博热搜暂停更新；即刻APP回归；Android 11 Beta版发布 | 科技新闻速递

      新浪微博热搜暂停更新；即刻APP回归；Android 11 Beta版发布 | 科技新闻速递
      为您带来最新的科技资讯，涵盖社交媒体动态、软件更新及行业重大事件。CSDN携手您共同关注科技前沿。 ... [详细]
      蜡笔小新   2024-11-20 12:38:19
    • stream

      我的读书清单（持续更新）

      我的读书清单（持续更新）201705311.《一千零一夜》2006（四五年级）2.《中华上下五千年》2008（初一）3.《鲁滨孙漂流记》2008（初二）4.《钢铁是怎样炼成的》20 ... [详细]
      蜡笔小新   2024-11-21 13:01:23
    • stream

      Python 领跑！2019年2月编程语言排名更新

      Python 领跑！2019年2月编程语言排名更新
      根据最新的编程语言流行指数（PYPL）排行榜，Python 在2019年2月的份额达到了26.42%，稳坐榜首位置。 ... [详细]
      蜡笔小新   2024-11-21 09:18:39
    • string

      protobuf 使用心得：解析与编码陷阱

      protobuf 使用心得：解析与编码陷阱
      本文记录了一次在广告系统中使用protobuf进行数据交换时遇到的问题及其解决过程。通过这次经历，我们将探讨protobuf的特性和编码机制，帮助开发者避免类似的陷阱。 ... [详细]
      蜡笔小新   2024-11-20 14:35:41
    author-avatar
    Me丶i丶晓莹丬_690
    这个家伙很懒，什么也没留下！
    Tags | 热门标签
    • const
    • range
    • httpclient
    • list
    • schema
    • usb
    • netty
    • rsa
    • command
    • dockerfile
    • include
    • window
    • cSharp
    • match
    • grid
    • datetime
    • string
    • stream
    • instance
    • php7
    • emoji
    • search
    • frameworks
    • javascript
    • join
    • yaml
    • controller
    • keyword
    • random
    • timezone
    RankList | 热门文章
    • 1结果出来了，看你多少分？
    • 2截图软件哪个好用？这三个软件帮你轻松搞定
    • 3这10个问题去哪儿啦
    • 4SVM熟练到精通5：MATLAB实例
    • 5[转载] 通用版 联想金钥匙/联想工具包
    • 6cnc数控机床怎么使用计算机,五个数控机床CNC加工中心的编程代码加工小技巧！...
    • 7厓山海战位置,战山海景区在哪里
    • 880端口被ntoskrnl.exe占用
    • 9mysql使用desc 查看表结构
    • 10二分图匹配相关性质(知识点整理)
    • 11iOS现应用验证漏洞 可利用其劫持设备
    • 12整体设计、分步实施 体现ERP整体价值 (转)
    • 13团队紧密协作
    • 14黑客能够利用SS7漏洞通过你的手机号跟踪你的任何电话记录和移动路线
    • 15演讲：浅谈可扩展的MySQL数据库设计
    PHP1.CN | 中国最专业的PHP中文社区 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
    Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved | 京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有