谷歌浏览器插件初体验

最新推荐文章于 2024-04-06 13:10:16 发布

@LitterFisher

最新推荐文章于 2024-04-06 13:10:16 发布

阅读量821

点赞数

分类专栏：谷歌浏览器插件文章标签： chrome 前端

本文链接：https://blog.csdn.net/weixin_44002250/article/details/122196818

版权

谷歌浏览器插件专栏收录该内容

1 篇文章 0 订阅

订阅专栏

平时用ad这些谷歌浏览器拦截插件，觉得挺有意思的，就萌发写一个浏览器插件。

文章目录

前言
一、我的第一个插件
- 项目结构：
二、how to do
项目地址
总结

前言

本来以为会挺难的，其实也不是，多看官方文档就行

非官方文档

提示：以下是本篇文章正文内容，下面案例可供参考

一、我的第一个插件

用过firefox浏览器的都知道，有一个把当前页面的url生成二维码给手机扫描的功能

如图：
在这里插入图片描述

在这里插入图片描述
我的第一个插件决定就做它了。

效果：
在这里插入图片描述

项目结构：

在这里插入图片描述

二、how to do

1. 最简单的插件

新建文件夹，目录下建manifest.json文件

{
    "name": "urlToQRCode",
    "version": "1.0",
    "description": "a chrome extension which make tab url to qrcode for user scan by their phone",
    "manifest_version": 2,
}
"icons": { "128": "qrcode128.png" },

在这里插入图片描述
注意manifest_version 须大于2，
icons可选，大小最后选128x128

2. 浏览器加载插件

在这里插入图片描述
打开开发者模式，点击加载已解压的扩展程序。选择你刚才的目录。你的第一个插件就已经完成了。

3. browser_action

在manifest.json增加下面字段

{
    "name": "urlToQRCode",
    "version": "1.0",
    "description": "a chrome extension which make tab url to qrcode for user scan by their phone",
    "manifest_version": 2,
    "icons": { "128": "qrcode128.png" },
    "browser_action": {
        "default_icon": "qrcode.png",
        "default_title": "点击生成当前页面二维码",
        "default_popup": "popup.html"
    },
    "permissions": [
        "http://*/",
        "https://*/*",
        "tabs",
        "activeTab"
    ]
}

在这里插入图片描述
就是点击显示popup.html 。

4. popup.html

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <link href="popup.css" rel="stylesheet" type="text/css" />
</head>

<body>
    <div class="container">
        <div id="qrcode"></div>
        <span id="info">扫一扫，直接在手机上打开</span>
    </div>

</body>
<script text="text/javascript" src="qrcode.js"></script>
<script text="text/javascript" src="popup.js"></script>

</html>

新建：popup.css

.container {
    display: flex;
    display: -webkit-flex;
    flex-direction: column;
    align-items: center;
    width: 300px;
    height: 300px;
    justify-content: center;
    border-radius: 5px;
}

#info {
    margin-top: 5px;
    font-size: 20px;
}

引入qrcode.js 这是个开源项目，可在https://github.com/davidshimjs/qrcodejs,获得，或者本项目gitee中获取：https://gitee.com/yu_sheng_sheng/tab-url-to-qrcode-chrome-extension

同目录建popup.js，

window.onload = function() {
    chrome.tabs.query({ active: true, windowId: chrome.windows.WINDOW_ID_CURRENT }, (res) => {
        var qrcode = new QRCode(document.getElementById("qrcode"), {
            width: 200,
            height: 200
        });
        qrcode.makeCode(res[0].url);
    })
}