[英]Access localstorage in 'content.js' via `chrome.storage.sync.get` and display the token in console.log
通過進入'matches' page: ["*: //*.app.com/*"]
嘗試在content.js
中訪問此頁面的本地存儲,並將令牌發送到popup.js
並顯示在 console.log 和作為警報。 我在控制台中沒有任何錯誤或信息。 alerti console.log 中沒有顯示任何內容。
在本地存儲中,我有密鑰: auth
,
{access_token:"1234567"
expires_in: 86400
refresh_token: "8906789"
scope: null
token_type: "Bearer"
}
manifest.json
{
"manifest_version": 2,
"name": "chrome extension",
"description": "Chrome extension",
"version": "0.0.1",
"content_scripts": [
{
"matches": ["*://*.app.com/*"],
"js": ["content.js"]
}
],
"browser_action": {
"default_popup": "index.html",
"default_title": "Open the popup"
},
"icons": {
"16": "assets/icon-128.png",
"48": "assets/icon-128.png",
"128": "assets/icon-128.png"
},
"permissions": [
"*://*.app.com/*",
"storage"
],
"content_security_policy": "script-src 'self' 'unsafe-eval'; object-src 'self'"
}
內容.js
if (chrome && chrome.storage) {
chrome.storage.sync.get('auth', function(result) {
const item = result['access_token'];
console.log(item);
chrome.runtime.sendMessage(item, function(response) {
console.log(response);
});
});
}
popup.js
chrome.runtime.onMessage.addListener(function(message, sender, sendResponse) {
alert('I am popup!');
alert(message);
console.log(message);
console.log('I am popup!');
});
render(
<App/>,
window.document.getElementById("app-container")
);
更新
manifest.json
{
"name": "EXTENSION",
"options_page": "options.html",
"background": {
"page": "background.html"
},
"content_scripts": [{
"matches": [ "*://*.app.com/*" ],
"js": [ "content.js" ],
"all_frames": true
}],
"browser_action": {
"default_popup": "popup.html",
"default_icon": "icon-34.png"
},
"icons": {
"128": "icon-128.png"
},
"permissions": [
"https://*/",
"http://*/",
"*://*.app.com/*",
"storage"
],
"version": "1.0",
"manifest_version": 2,
"content_security_policy": "script-src 'self' 'unsafe-eval'; object-src 'self'"
}
內容.js
if(chrome && chrome.storage){
chrome.storage.sync.get('token', function(result){
const item = result['access_token'];
console.log(item);
chrome.runtime.sendMessage(item, function(response) {
console.log(response);
});
});
}
var port = chrome.runtime.connect({name: 'test'});
port.onMessage.addListener(function(msg, port) {
console.log(msg);
});
port.postMessage('from-iframe');
popup.js
chrome.runtime.onMessage.addListener(function(msg, sender, sendResponse) {
console.log('popup got', msg, 'from', sender);
sendResponse('response');
});
var iframePort; another function
chrome.runtime.onConnect.addListener(function(port) {
iframePort = port;
port.onMessage.addListener(function(msg, port) {
console.log(msg);
});
port.postMessage('from-popup');
});
render(
<App/>,
window.document.getElementById("app-container")
);
popup.html
<div id="app-container">
<iframe width="500" height="500" src="https://app.com"></iframe>
</div>
您可以做的是讓您的內容腳本將您的身份驗證數據保存到后台腳本。 為此,您需要一個持久的后台腳本。 可能有更好的方法來做你想做的事情,但我仍然不確定我是否理解正確。
這樣,您只需打開一次應用程序即可將數據從本地存儲保存到 bg 腳本,即使您在不同的選項卡上,瀏覽器操作仍將擁有您的身份驗證令牌。
內容腳本
// Send auth token to background script
chrome.storage.local.get(['auth'], result => {
chrome.runtime.sendMessage({type: 'saveAuthToken', auth: result});
});
背景腳本
let authToken = null;
// Save auth token sent from content script
chrome.runtime.onMessage.addListener(msg => {
if(msg.type == 'saveAuthToken')
authToken = msg.auth;
});
// Handle auth token request from your browser action
chrome.runtime.onMessage.addListener((msg, sender, sendResponse) => {
if(msg == 'getAuth')
{
if(!authToken){
sendResponse({error: 'Auth token not set. Please open app. '});
return;
}
sendResponse({auth: authToken});
}
});
瀏覽器動作
// Ask for auth token from background script
chrome.runtime.sendMessage("getAuth", response => {
if (response.error)
alert(response.error);
if (response.auth)
alert(JSON.stringify(response.auth));
});
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.