Chrome插件3: 添加后台页

Q z1997

已于 2022-03-19 14:17:37 修改

阅读量870

点赞数

分类专栏： Chrome插件

于 2022-02-14 20:40:22 首次发布

本文链接：https://blog.csdn.net/weixin_43939924/article/details/122929909

版权

chrome

Chrome插件专栏收录该内容

15 篇文章 10 订阅

订阅专栏

Chrome插件: 添加后台页

{
 "manifest_version":2,
 "name":"FirstChromePlugin",
 "version":"1.2",
 "description":"第一个谷歌插件",
 "author":"Qz1997",
 "icons": {
	"16":"img/1.png",
	"48":"img/1.png",
	"128":"img/1.png"
 },
 "browser_action": {
	"default_icon":"img/1.png",
	"default_title":"Qz第一个插件",
	"default_popup": "html/main.html"
 },
 "background":{
	"page": "html/back.html"
 }
}

解释

# 注意使用 UTF-8的编码
{
 # 插件框架的版本
 "manifest_version":2,
 # 插件名称
 "name":"FirstChromePlugin",
 # 插件版本
 "version":"1.0",
 # 插件的描述
 "description":"第一个谷歌插件",
 # 作者
 "author":"Qz1997",
 # 图标
 "icons": {
	"16"
 },
 "browser_action": {
        # 默认的图标
	"default_icon":"img/1.png",
	# 鼠标上的提示
	"default_title":"Qz第一个插件",
	# 展示页面 : 相对路径地址
	"default_popup": "main.html"
 }
  "background":{
	# 后台页位置
	"page": "html/back.html"
 }
}

目录结构
在这里插入图片描述

html文件夹
main.html

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Qz第一一个插件</title>
</head>

<body>
<h1>FirstChromePlugin</h1>
<h2>功能</h2>
<div id="div1"></div>
<div id="div2">
    <a href="#" id="openBack">打开后台页</a>
    <a href="#" id="getBackTitle">获取后台页标题</a>
    <a href="#" id="setBackTitle">设置后台页标题</a>
    <a href="#" id="callBackJs">调用台页JS</a>
</div>
</body>
<script src="../js/jquery.js" type="text/javascript"></script>
<script src="../js/qz.js" type="text/javascript"></script>

</html>

back.html

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>后台页</title>
</head>
<body>
<h1>后台页</h1>

</html>

js文件夹
jquery 就是jquery
qz.js

    $("#openBack").click(o => {
    	// 打开新页面
        window.open(chrome.extension.getURL("html/back.html"))
    });
    $("#getBackTitle").click(o => {
    	// 获取后台页对象
        let bg = chrome.extension.getBackgroundPage();
        alert(bg.document.title);
    });
    $("#setBackTitle").click(o => {
    	// 输入框
        let newTitle = prompt("输入新标题", "新标题");
        // 获取后台页对象
        let bg = chrome.extension.getBackgroundPage();
        bg.document.title = newTitle
    });
    $("#callBackJs").click(o => {
        alert("12313")
    })

添加到浏览器效果
在这里插入图片描述
打开后台页

获取后台页标题

设置标题

调用后台页JS

Q z1997

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Chrome插件3: 添加后台页

Chrome插件: 添加后台页{ "manifest_version":2, "name":"FirstChromePlugin", "version":"1.2", "description":"第一个谷歌插件", "author":"Qz1997", "icons": { "16":"img/1.png", "48":"img/1.png", "128":"img/1.png" }, "browser_action": { "default_icon":"img/1.png",
复制链接

扫一扫

专栏目录