chrome系列-扩展程序开发学习-从无到有

chrome系列-扩展程序开发学习-从无到有

BUG集散地

2018-09-03 17:08 阅读 38 喜欢 0 chrome系列 从无到有 chrome插件

本来是想做一个图床,然后在chrome扩展中添加上,但是发现chrome的扩展有点毫无头绪,只能从头练习,从头学了。

例子1-最最简单的展示

先做一个例子,能够添加上即可,内容什么的无所谓。

了解chrome 扩展

那么最重要的就是这个manifest.json文件,至于里面有什么,现在一步一步的慢慢添加。 来一个我的文件夹结构: 文件夹结构

{
    "manifest_version":2,
    "name":"DEMO",
    "version":"1.0",
    "browser_action":{
        "default_title":"点击查看信息",
        "default_popup":"popup.html"
    }
}

上面是一个简单的内容,其中manifest_version:2这个是固定的,name是你的程序的名字,version是版本,browser_action 是浏览器的动作,default_title 是鼠标移入图标的提示,default_popup是点击图标的展示页面。

那么我们后面需要做的就是增加一个popup.html,内容无所谓,先有再说。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        .time{
            padding:30px;
            font-size:20px;
            font-weight:bold;
            min-width:200px;
        }
    </style>
</head>
<body>
    <div class="time" id="test">

    </div>
</body>
</html>
<script type="text/javascript" src="popup.js"></script>

要说明的一点是:html中不能内联js,只能通过js文件外链才能生效。

展示

找到谷歌的扩展程序 --> 加载已解压的扩展程序 --> 选择文件夹 --> 完毕。 加载扩展程序

然后点击图标就会发现已经有了页面。 DEMO

是不是很简单啊.(前提要懂CSS/HTML/JS哦) 后续会把练习的几个例子都记录下来。

转载请注明出处: https://chrunlee.cn/article/chrome-learn-1.html


如果对你有用的话,请赏给作者一个馒头吧 ...或帮点下页面底部的广告,感谢!!

赞赏支持
提交评论
评论信息(请文明评论)
暂无评论,快来快来写想法...
推荐
上一张中已经完成了比较简易的3D全景浏览,但是...这是写死在xml中的,对于我们实际的项目,这种情况是不可能适应的。所以,来了解下如何动态加载xml已经设置对应的热点。
接下来,我们综合上面的配置,再加一个选项页面配置,做一个天气预报的小栗子。
ubuntu 配置nginx反向代理,这里简单记录下,后续再复习..
写到这里,基本上就完成了我之前一篇文章中写的,我要做一个自己的图床的小程序了。在最初我要做图床的时候,发现在谷歌扩展程序上一无所知,所以才开始学习的这个,到这一步,至少能勉强能跑通自己的小程序了。
前一阵子做了个图床,可以粘贴上传,查看服务器上的文件... 但是自己的服务器总是有问题..空间还小,就怕哪天没钱续费了。同事昨天想要一个七牛的图床,在网上找了下,只找到了 qiniu upload files插件,自己使用了下,挺好用,但是没有复制粘贴
在程序中,会有需要后台一直运行的场景。这一节我们来做一个监控某网站的运行状态,如果没有运行,则改变当前的图标。
功能来源于客户需求。客户有需求想把班级内所有学生的错题本生成pdf文档下载下来... 目前没有做这个功能,只有页面,还好chrome浏览器有保存pdf的功能,但是一想到这么多的学生,这么多的学科、以及这么多的参数... 还好有puppeteer
BUG 报错Tainted canvases may not be exported 。 在通过canvas 调用 toDataURL的时候出现的问题。