Chrome扩展学习Demo(三)：将浏览器地址栏的网址转换为二维码

蔚落 2024-02-19 22:06 12阅读 0赞

> 场景：将当前地址栏网址转换为二维码

效果图：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3hpYW94aW9uZ19qaWF4aW4_size_16_color_FFFFFF_t_70][]

代码截图：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3hpYW94aW9uZ19qaWF4aW4_size_16_color_FFFFFF_t_70 1][]

#### manifest.json ####

{
      "manifest_version": 2,
      "name": "将浏览器地址栏网址转换为二维码",
      "version": "1.0",
      "description": "将浏览器地址栏网址转换为二维码",
      "icons": {
        "48": "icon.png"
      },
      "browser_action": {
        "default_icon": "icon.png",
        "default_popup": "popup.html"
      },
      "permissions": [
        "http://*/*", // 可以通过executeScript或者insertCSS访问的网站
        "https://*/*"// 可以通过executeScript或者insertCSS访问的网站
      ]
    }

#### popup.html ####

<!DOCTYPE html>
    <html>
    <head>
    	<title>Website turn to QRcode</title>
    	<script src="jquery-2.1.3.min.js"></script>
    	<script src="jquery.qrcode.min.js"></script>
    	<script src="popup.js"></script>
    </head>
    
    <body>
    <p id="website">http://blog.csdn.net/xiaoxiong_jiaxin</p>
    <p id="title"></p>
    <div id="QRcode"></div>
    </body>
    </html>

#### popup.js ####

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3hpYW94aW9uZ19qaWF4aW4_size_16_color_FFFFFF_t_70]: https://image.dandelioncloud.cn/pgy_files/images/2024/01/29/2bcb0001f72342a4b32f21a3d8c26f37.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3hpYW94aW9uZ19qaWF4aW4_size_16_color_FFFFFF_t_70 1]: https://image.dandelioncloud.cn/pgy_files/images/2024/01/29/b774fcff59eb4dd8846a10ddfe51d5f6.png