Chrome拓展插件快速尝试与极速上手:「每日古诗」demo的实现

最新推荐文章于 2022-10-20 20:48:38 发布

mizuhokaga

最新推荐文章于 2022-10-20 20:48:38 发布

阅读量416

点赞数 2

分类专栏：兴趣钻研文章标签： chrome vscode css

本文为博主原创文章，转载请显著位置标明出处，未经博主允许不得用于商业目的。

本文链接：https://blog.csdn.net/qq_44831907/article/details/120633270

版权

兴趣钻研专栏收录该内容

6 篇文章 0 订阅

订阅专栏

0. 缘起

突然好奇chrome的插件是怎么写的，毕竟用chrome插件用的挺多的，花了点时间学了下最基础的，功能是随机展示一句古诗词，效果如下。
代码在github：https://github.com/mizuhokaga/Daily-Poem
在这里插入图片描述
调用的是别人的古诗词接口。

1.编写代码

项目架构如下，Chrome插件没有严格的项目结构要求，只要保证本目录有一个manifest.json即可，开发工具也没啥要求，我用vscode。
css和 jq都是我方便开发放进去的。
我们这个扩展的功能就是用弹出框展示句子，所以编写流程是manifest-》popup相关文件。
在这里插入图片描述

manifest.json

根据官方文档修修改改就差不多了。
作为一个Chrome插件最重要也是必不可少的文件，它用来配置所有和插件相关的配置，必须放在根目录。其中，manifest_version、name、version3个是必不可少的，description和icons是推荐的。

{
    "manifest_version": 3,
    "name": "poem",
    "version": "1.0.0",
    "description": "A plugin about poem",
    "author": "mizuhokaga",
    "action": {
        "default_title": "Daily Poem",
        "default_popup": "popup.html",
        "default_icon": {
            "16": "images/icon.png",
            "24": "images/icon.png",
            "32": "images/icon.png"
        }
    },
     "host_permissions": [
        "https://v2.jinrishici.com/one.json",
        "https://*.baidu.com/*"
    ]
}

manifest_version目前版本已经更新到3了，网上的案例大多写2是因为之前是mv2的版本，这个值跟着官方文档走。
host_permissions是v3版本下的permissions细分，在里面写允许访问的接口url。之前我用permissions里写接口url有跨域问题换成host_permissions就没问题了。
default_popup定义默认的弹出框，popup是点击图标时打开的一个小窗口网页，焦点离开网页就立即关闭，一般用来做一些临时性的交互。这里我们用popup展示一句诗词足够了。

popup相关

popup其实算一个网页，我们甚至点击出popup后可以右键-》检查去调试。我们直接根目录新建popup.html文件（记得和manifest.json里的default_popup文件名一一对应）。
随便写点样式。我导入bootsrap.css是为了样式好看点。jQuery和自定义的popup.js导入顺序别搞乱了。

<!DOCTYPE html>
<html lang="zh">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link href="css/bootstrap.min.css" rel="stylesheet">

    <style>
        * {
            padding: 3px;
            margin: 0;
        }  
        body {
            width: 250px;
        }
        #badges,
        #poem_info {
            width: auto;
        }
        #foot {
            float: right;
        }
        #author {
            font-size: 5px;
        }
    </style>
</head>

<body>
    <div id="badges">
        <span id="one" class="badge" style="background-color: #66ccff;">秋</span>
        <span id="three" class="badge" style="background-color: #fac646;">平静</span>
    </div>
    <div id="poem_info">正在查询每日诗歌</div>
    <div id="foot">
        <span id="author">author</span>
        <span id="search" class="glyphicon glyphicon-search" aria-hidden="true"></span>

    </div>
    <script src="js/jquery-3.0.0.min.js"></script>
    <script src="js/popup.js"></script>
</body>

</html>

之后编写popup.js。这里用jQuery发Ajax请求到接口拿数据在赋值给html就好了。

one = $('#one')
two = $('#author')
three = $('#three')
content = $('#poem_info')
info = null;
bdSearchUrl = "https://www.baidu.com/s?wd=";
$.get('https://v1.jinrishici.com/all.json', function(res, status) {
    console.log(res)
    if (status === "success") {
        info = res.content;
        content.html(res.content);
        one.html(res.origin);
        two.html(res.author);
        var split = res.category.split("-");
        three.html(split[1] + "-" + split[2]);
    } else {

    }
}, 'json');
//点击搜索icon后搜索
$('#search').click(function() {
    // console.log("click search")
    if (info == null) {
        info == "古诗词";
    }
    window.open(bdSearchUrl + info)
});

古诗词接口接口返回的数据结构如下：

{
"content": "海风吹不断，江月照还空。",
"origin": "望庐山瀑布水二首",
"author": "李白",
"category": "古诗文-山水-瀑布"
}

现在代码写完了！找张icon放到images文件夹配置一下manifest.json就好了！

打包上传

chrome 地址栏输入 chrome://extensions/，右上角打开开发者模式。然后在左上角点击打包拓展程序就行了。第一次没有私钥无视就好了，之后会自动生成的。
在这里插入图片描述
点击小图标，效果就出来了

点击search icon跳转搜索

不足

css不熟，对于某些超长题目的古诗有显示不全。
在这里插入图片描述
参考

https://www.cnblogs.com/zzzzzzzh/p/12452132.html
https://www.cnblogs.com/liuxianan/p/chrome-plugin-develop.html#%E6%89%93%E5%8C%85%E4%B8%8E%E5%8F%91%E5%B8%83

mizuhokaga

关注

2
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
Chrome拓展插件快速尝试与极速上手:「每日古诗」demo的实现

0. 缘起突然好奇chrome的插件是怎么写的，毕竟用chrome插件用的挺多的，花了点时间学了下最基础的，功能是随机展示一句古诗词，效果如下。调用的是别人的古诗词接口。1.编写代码项目架构如下，Chrome插件没有严格的项目结构要求，只要保证本目录有一个manifest.json即可，开发工具也没啥要求，我用vscode。css和 jq都是我方便开发放进去的，实际上完全不需要。我们这个扩展的功能就算用弹出框展示句子，所以编写流程是manifest-》popup相关文件。manifest.
复制链接

扫一扫

专栏目录