Chrome Extension 入门教程（二）例子

最新推荐文章于 2023-12-22 16:36:33 发布

kongkong5020

最新推荐文章于 2023-12-22 16:36:33 发布

阅读量842

点赞数

分类专栏： Chrome Extension

本文链接：https://blog.csdn.net/weixin_42194433/article/details/114177378

版权

Chrome Extension 专栏收录该内容

4 篇文章 1 订阅

订阅专栏

1、只有最基本信息

manifest.json

{
	"manifest_version":3,
	"name":"manifest",
	"version" : "1.0.0",
	"description": "demo manifest"
}

2、右上角显示图标

manifest.json

{
	"manifest_version":3,
	"name":"manifest",
	"version" : "1.0.0",
	"description": "demo manifest",
	"action":{
		"default_icon":{
			"16": "icon16.png"
		},
		"default_title":"Click to open demo manifest"
	}
}

3、点击图标弹出界面

manifest.json

{
	"manifest_version":3,
	"name":"manifest",
	"version" : "1.0.0",
	"description": "demo manifest",
	"action":{
		"default_icon":{
			"16": "icon16.png"
		},
		"default_title":"Click to open demo manifest",
		"default_popup": "popup.html"
	}
}

popup.html

<!DOCTYPE html>
<html>
	<head>
		<link rel="stylesheet" href="popup.css">
	</head>
	<body>
		<button id="btn"></button>
		<script src="popup.js"></script>
	</body>
</html>

popup.css

button {
	height: 30px;
	width: 30px;
	outline: none;
	margin: 10px;
	border: none;
	border-radius: 2px;
}
button.current {
	box-shadow: 0 0 0 2px white,
				0 0 0 4px black;
}

popup.js

document.addEventListener('DOMContentLoaded', 
	function(event){
		var btn = document.getElementById("btn")
		btn.onclick = function() {
			alert("Click Button");
		}
	}
);

4、注入内容脚本

manifest.json

{
	"manifest_version":3,
	"name":"manifest",
	"version" : "1.0.0",
	"description": "demo manifest",
	"action":{
		"default_icon":{
			"16": "icon16.png"
		},
		"default_title":"Click to open demo manifest",
		"default_popup": "popup.html"
	},
	"content_scripts": [
		{
			"matches": [
				"http://*/*",
				"https://*/*"
			],
			"css": [
				"contentScript.css"
			],
			"js": [
				"contentScript.js"
			]
		}
	]
}

contentScript.js

chrome.runtime.onMessage.addListener(
	function(request, sender, sendResponse)
	{
		if (request.action === 'hello') {
			sendResponse({ results: 'Hello World! 我是来自「' + document.title + '」content script世界的消息~' });
			return true;
		}
	}
);

popup.js

document.addEventListener('DOMContentLoaded', 
	function(event){
		var btn = document.getElementById("btn")
		btn.onclick = function() {
			sendMessageToContentScript(
				{ action: 'hello' },
				function(response){
					alert(response.results);
				}
			);
		}
	}
);
function getCurrentTabId(callback)
{
	chrome.tabs.query({active: true, currentWindow: true}, function(tabs)
	{
		if(callback) callback(tabs.length ? tabs[0].id: null);
	});
}
function sendMessageToContentScript(message, callback)
{
	getCurrentTabId((tabId) =>
		{
			chrome.tabs.sendMessage(tabId, message, function(response)
			{
				if(callback) callback(response);
			});
		}
	);
}

5、后台添加菜单

manifest.json

{
	"manifest_version":3,
	"name":"manifest",
	"version" : "1.0.0",
	"description": "demo manifest",
	"action":{
		"default_icon":{
			"16": "icon16.png"
		},
		"default_title":"Click to open demo manifest",
		"default_popup": "popup.html"
	},
	"icons":{
			"16": "icon16.png"
	},
	"content_scripts": [
		{
			"matches": [
				"http://*/*",
				"https://*/*"
			],
			"css": [
				"contentScript.css"
			],
			"js": [
				"contentScript.js"
			],
			"run_at": "document_end"
		}
	],
	"background": {
		"service_worker": "background.js"
	},
	"permissions": [
		"contextMenus"
	]
}

background.js

chrome.runtime.onInstalled.addListener(() => {
	chrome.contextMenus.create({
		id: "some-command",
		title: "some title",
		contexts: ["all"]
	});
});

chrome.contextMenus.onClicked.addListener(function(info, tab) {
	if (info.menuItemId == "some-command") {
		console.log("yay!");
	}
});

右键菜单

调试窗口

kongkong5020

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
Chrome Extension 入门教程（二）例子

1、只有最基本信息manifest.json{ "manifest_version":3, "name":"manifest", "version" : "1.0.0", "description": "demo manifest"}2、右上角显示图标manifest.json{ "manifest_version":3, "name":"manifest", "version" : "1.0.0", "description": "demo manifest", "act
复制链接

扫一扫

专栏目录