[09] chrome 扩展开发 - browserAction API 使用示例
一、说明
扩展程序的 browser_action
的常用 API 的使用和示例。
二、manifest.json
{
"name": "Getting Started Example",
"version": "1.0",
"description": "Build an Extension!",
"permissions": ["storage", "declarativeContent", "contextMenus"],
"background": {
"scripts": ["background.js"],
"persistent": false
},
"browser_action":{
"default_popup": "popup.html"
},
"icons": {
"16": "images/get_started16.png",
"32": "images/get_started32.png",
"48": "images/get_started48.png",
"128": "images/get_started128.png"
},
"manifest_version": 2
}
三、popup.html
因为使用了 popup 的显示方式,因此加了一些 按钮:
<html>
<head>
<title>Water Popup</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css">
<style>
.wrapper{
width: 750px;
height: 300px;
}
.btn {
margin-bottom: 20px;
}
</style>
</head>
<body>
<div class="wrapper container">
<h2>browserAction </h2>
<button class="btn btn-primary" id="setTitle">setTitle</button>
<button class="btn btn-primary" id="getTitle">getTitle</button>
<button class="btn btn-primary" id="setPopup">setPopup</button>
<button class="btn btn-primary" id="getPopup">getPopup</button>
<button class="btn btn-primary" id="setBadgeText">setBadgeText</button>
<button class="btn btn-primary" id="clearBadgeText">clearBadgeText</button>
<button class="btn btn-primary" id="getBadgeText">getBadgeText</button>
<button class="btn btn-primary" id="setBadgeBackgroundColor">setBadgeBackgroundColor</button>
<button class="btn btn-primary" id="getBadgeBackgroundColor">getBadgeBackgroundColor</button>
</div>
<script src="popup.js"></script>
</body>
</html>
popup.js
页面的逻辑是放在 popup.js 中:
const buttonSetTitle = document.getElementById('setTitle');
const buttonGetTitle = document.getElementById('getTitle');
const setPopup = document.getElementById('setPopup');
const getPopup = document.getElementById('getPopup');
const setBadgeText = document.getElementById('setBadgeText');
const clearBadgeText = document.getElementById('clearBadgeText');
const getBadgeText = document.getElementById('getBadgeText');
const setBadgeBackgroundColor = document.getElementById('setBadgeBackgroundColor');
const getBadgeBackgroundColor = document.getElementById('getBadgeBackgroundColor');
buttonSetTitle && buttonSetTitle.addEventListener('click', () => {
chrome.browserAction.setTitle({
title: 'set new title'
}, () => {
alert('set new title successed!')
})
});
buttonGetTitle && buttonGetTitle.addEventListener('click', () => {
chrome.browserAction.getTitle({}, (res) => {
alert(res);
})
});
setPopup.addEventListener('click', () => {
chrome.browserAction.setPopup({
popup: './popup2.html'
}, (res) => {
alert(JSON.stringify(res))
})
});
getPopup.addEventListener('click', () => {
chrome.browserAction.getPopup({}, (res) => {
alert(JSON.stringify(res))
})
});
setBadgeText.addEventListener('click', () => {
chrome.browserAction.setBadgeText({
text: 'newBadge'
}, (res) => {
alert(JSON.stringify(res))
})
});
clearBadgeText.addEventListener('click', () => {
chrome.browserAction.setBadgeText({
text: ''
}, (res) => {
alert(JSON.stringify(res))
})
});
getBadgeText.addEventListener('click', () => {
chrome.browserAction.getBadgeText({}, (res) => {
alert(JSON.stringify(res))
})
});
setBadgeBackgroundColor.addEventListener('click', () => {
chrome.browserAction.setBadgeBackgroundColor({
color: '#FF5000'
}, (res) => {
alert(JSON.stringify(res))
})
});
getBadgeBackgroundColor.addEventListener('click', () => {
chrome.browserAction.getBadgeBackgroundColor({}, (res) => {
alert(JSON.stringify(res))
})
});
完整代码
github:
文章已经结束啦
文章版权:Postbird-There I am , in the world more exciting!
本文链接:http://www.ptbird.cn/chrome-extentions-browserAction-api-demo.html
转载请注明文章原始出处 !
扫描二维码,在手机阅读!