有一种方法(使用可选权限)可以在不禁用现有用户的扩展的情况下添加新的扩展权限,同时还能确保新用户在安装后得到提示接受必需权限和可选权限。
可以使用 chrome.permissions.request API 请求可选权限,但它仅在请求之前有用户操作时才起作用。满足此要求并仍提供无缝用户体验的最简单方法是检查后台页面中的权限并在运行时在弹出窗口中请求可选权限。
加载扩展后(在安装和后续浏览器启动后)可以在后台页面中发出权限请求。重新启动浏览器后,将提示任何缺少任何权限的现有用户接受该权限。
以下示例包括:
- 后台页面 JavaScript (background_page.js)
- 通知弹出 html 文件 (notification_popup.html)
- 通知弹出 JavaScript (notification_popup.js)
您还需要在 manifest.json 中声明“optional_permissions”才能使示例正常工作。该示例适用于 Chrome 扩展程序和 Firefox 插件。
background_page.js
var brwsr = null;
if (typeof chrome != "undefined") {
brwsr = chrome;
}
else{
brwsr = browser;
}
var opt_perms = brwsr.runtime.getManifest().optional_permissions;
var requiredOptionalPermissions = {}
if(typeof opt_perms!="undefined" && opt_perms.length>0){
var perms = []
var origins = []
var re = new RegExp("^(http|https)://", "i");
for(var i=0; i<opt_perms.length; i++){
if(opt_perms[i]==="<all_urls>"|| re.test(opt_perms[i])){
origins.push(opt_perms[i])
}
else{
perms.push(opt_perms[i])
}
}
if(perms.length>0){
requiredOptionalPermissions.permissions = perms
}
if(origins.length>0){
requiredOptionalPermissions.origins = origins
}
}
var requiresPermission = ()=>{
// add your code here
}
// check if optional permission exists and request if not
var runFunctionsRequiringOptPermissions = function(requiredPermissions={}, userGesture=false, callback=()=>{}){
if(typeof requiredPermissions.permissions!="undefined" || typeof requiredPermissions.origins!="undefined"){
brwsr.permissions.contains(requiredPermissions, function(res) {
if (!res) {
// The extension doesn't have the permissions.)
if(userGesture){
brwsr.permissions.request(requiredPermissions, function(granted){
if(granted){
// perform actions that required the permission
requiresPermission()
}
callback();
});
return;
}
// open the notification popup
window.open("notification_popup.html", "extension_popup", "width=530,height=190,status=no,scrollbars=yes,resizable=no,screenY=+"+(screen.height/2-95)+",screenX="+(screen.width/2-265));
}
else{
// perform actions that required the permission
requiresPermission()
}
});
}
}
runFunctionsRequiringOptPermissions(requiredOptionalPermissions)
// add listener
brwsr.runtime.onConnect.addListener(function(port) {
if(port.name == "optionalPermRequestPopup"){
port.onMessage.addListener(
function(request, sender, sendResponse) {
if (request.okButtonClicked === true) {
runFunctionsRequiringOptPermissions(requiredOptionalPermissions, true, function(){
// callback to close the notification popup
port.postMessage({'close':true});
})
return;
}
port.postMessage({'close':true})
}
);
}
});
notification_popup.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Extension Name</title>
<style>
.container {
font-size:medium;
text-align:center;
}
.button{
height: 30px;
width: 70px;
background-color: #448be9;
color: white;
border-color: #448be9;
border-width: thin;
margin-right: 10px;
float: right;
}
.btnCancel{
background-color: white;
color: #448be9
}
</style>
</head>
<body>
<div class="container">
<p class='text'>Please upgrade the permissions to enable the latest features.</p>
<button class="button btnCancel">Cancel</button>
<button class="button btnOk">OK</button>
</div>
<script src="notification_popup.js"></script>
</body>
</html>
notification_popup.js
var brwsr = null;
if (typeof chrome != "undefined") {
brwsr = chrome;
}
else{
brwsr = browser;
}
var port = brwsr.runtime.connect({
name : "optionalPermRequestPopup"
});
window.addEventListener("load", function(event) {
var okButtons = document.querySelectorAll(".btnOk");
okButtons.forEach(function(okButton) {
okButton.addEventListener("click", function(event) {
port.postMessage({okButtonClicked: true})
});
});
port.onMessage.addListener(function(request) {
for (var key in request) {
switch(key){
case "close":
window.close();
break;
default:
break;
}
}
});
});