当前位置：网站首页 > 技术文章 > 正文

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

zhezhongyun 2024-12-22 21:56 60 浏览

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

例子1-最最简单的展示

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

了解chrome 扩展

manifest.json
入口文件(可有可无)
icon (可有可无)

那么最重要的就是这个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文件外链才能生效。

展示

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

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

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

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

HTML 拓展阅读

上一篇：Flask 模板:使用 Jinja2 渲染 HTML
下一篇：最新小学语文优秀论文:小学语文兴趣教学探析

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

例子1-最最简单的展示

了解chrome 扩展

展示

相关推荐

b端详情页:各种信息聚集地，设计师要如何规划这一亩三分地呢

漏洞系列一一看我一招征服漏洞 SSRF

接口测试遇到500报错?别慌，你的头部可能有点问题

Web前端需要学什么?Web前端开发需要学习哪些?

前端Flex布局可视化布局工具介绍，vue和html5快速设计利器

「资讯」为强迫用户使用Edge浏览器，微软又出新招数

HTML 简介（html简介及优缺点）

HBuilderX，uni-app创建HTML5项目，同时支持浏览器和移动端

关于HTML5被简称做H5，你怎么看?（html5缩写）

现在页面实时聊天都使用Websocket技术实现吗?