通过`chrome.storage.sync.get'访问'content.js'中的localstorage并在console.log中显示令牌 [英] 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中什么也没有显示.

By entering the 'matches' page: ["*: //*.app.com/*"] tries to access the localstorage of this page in content.js and send the token to popup.js and display in console.log and as an alert. I don't have any errors or information in the console. Nothing displays in alerti console.log.

在本地存储中，我有密钥:auth，

In localstorage I have key: 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'"
}

content.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'"
}

content.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>

推荐答案

您可以做的是让您的内容脚本将身份验证数据保存到后台脚本中.您将需要一个持久的后台脚本.可能有更好的方法来做您想做的事情，但我仍然不确定我是否正确理解您的情况.

What you can do is have your content script save your auth data to a background script. You'll need a persistent background script for this. There's probably a better way to do what you're trying to do but i'm still not sure if i understand you correctly.

通过这种方式，您只需要打开一次应用程序即可将数据从本地存储保存到bg脚本，并且即使您位于其他选项卡上，浏览器操作仍将具有您的身份验证令牌.

This way you only need to open your app once to save data from local storage to bg script and the browser action will still have your auth token even if you're on a different tab.

内容脚本

// 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));
});

这篇关于通过`chrome.storage.sync.get'访问'content.js'中的localstorage并在console.log中显示令牌的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！