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

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

月光魔力鸭

2018-09-03 17:08 阅读 449 喜欢 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


感谢支持!

赞赏支持
提交评论
评论信息 (请文明评论)
暂无评论,快来快来写想法...
推荐
最近先研究下jenkins远程部署,在自己服务器上跑一个先,简单记录下碰到的问题。
docker build 执行yum失败,找不到repo
整理一些相关的信息,防止后续再找不到。
chrome 如何查看placeholder样式以及其他伪类样式
最近在做直播,是用的webrtc,然后找的免费的starrtc ,当然,可能由于种种原因吧.. 用起来并没有特别顺畅,后续还希望能够深入这部分,从现在开始学习..当然,websocket 是顺带的,可以用来发消息什么的肯定也是要用到的。
登录方式现在非常多,不过像我这种小站让用户自己注册基本是不可能的了,只能依赖现有的第三方的登录来集成,之前有集成github,不过这个太过针对性,这里准备集成QQ互联登录,慢慢记录下。
最近有系统需要知道性能瓶颈,尝试使用jmeter对重要接口进行并发测试,确定能否支撑一定的用户数量。
小程序需要用到用户的手机号码,看了下API 以及相关的demo,基本都是服务端进行解密的,问题是需要的参数并没有用到secret,只需要 session_key / iv /encryptedData 即可,那完全可以在客户端进行处理啊。