如何在谷歌浏览器扩展中检测我是否已登录到另一个网站？

Question

我有一个网络应用程序，并为其制作了一个Google Chrome扩展。如果我已经登录到网站，如何在Google Chrome扩展中检测它，以便我不必再次登录扩展。当我登录到网站时，我希望扩展能够检测到我已经登录到网站并自动登录到扩展。

我遇到了以下错误：

“content.js”无法加载内容脚本的JavaScript文件。

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>

更新：

结构文件夹。

//src
    //js
      //background.js
      //options.js
      //popup.js
//background.html
//manifest.json
//content.js
//options.html
//popup.html

当我删除时

"content_scripts": [{
    "matches": [ "*://*.app.com/*"  ],
    "js": [ "content.js" ],
    "all_frames": true
}]

该扩展正在加载。

- Umbro

---

这取决于该网站如何处理身份验证。如果是通过cookies，您的扩展程序可以在后台脚本中使用chrome.cookies API或在内容脚本中使用document.cookie。添加更多相关细节以使问题更易回答。 - wOxxOm

如果您正在使用基于JWT的身份验证，并将令牌保存为cookie或本地存储，则可以从您的扩展程序中读取两者并将令牌用作自己的。我在这里找到了一篇文章，请看看。 我能从Chrome扩展访问站点的localStorage吗？ - savrum

Web应用程序的用户是“谷歌账户”还是您自己处理用户/数据库？ 如果您使用自己的数据库，请在用户登录扩展程序时检查数据库是否存在X用户。反之亦然。当一个用户登录时，另一个用户会自动登录（两者都需要进行身份验证）。 - user11867329

在您的文件夹结构中没有名为 content.js 的文件。 - Iván Nokonoko

@IvánNokonoko content.js与manifest.json在同一文件夹中。看，我更新了我的文件结构。我发现你有编写Google Chrome扩展程序的经验，能帮帮我吗？ - Umbro

Answer 1

当Chrome扩展程序用户已经在使用该扩展程序的网站中登录时，如何对用户进行身份验证呢？

通常身份验证的最常见方式有两种：一是通过cookies，二是通过由后端签名的令牌，然后告诉后端它正在与哪个用户进行交互。

对于cookies：

如果使用了cookies进行身份验证，则只需在您的扩展程序中使用chrome.cookies即可在您的后台脚本中使用cookies。或者，如果Chrome扩展程序使用内容脚本，则可以直接调用document.cookie来检索身份验证cookie。

对于令牌身份验证：

如果您的应用程序使用OAuth2等授权机制，并且授予用户访问令牌并将其本地存储以使其再次对API进行身份验证，则可以通过调用保存token的位置来检索它。

如果令牌保存在localStorage中，则可以使用get方法检索其中保存的信息。 这里有更多关于此的文档同样，如果令牌保存在sessionStorage中，则可以访问它。 这里也有更多的文档。

- Alejandro Vales

---

这并没有解决我的问题：我写了一个错误：“无法加载内容脚本的JavaScript文件“content.js”。 - Umbro

我认为问题是关于身份验证的。你的项目文件结构是什么？另外，当你打包项目时，它是否生成了一个 content.js 文件？你已经尝试过这个了吗？https://stackoverflow.com/a/34555633/4229159 - Alejandro Vales

它不起作用。当我删除"content_scripts": [{ "matches": [ "*://*.app.com/*" ], "js": [ "content.js" ], "all_frames": true }] 扩展程序就会工作。 - Umbro

Answer 2

请确保 content.js 与 manifest.json 在同一个文件夹中，或在 manifest.json 中更改其路径。

  "content_scripts": [{
    "matches": [ "*://*.app.com/*"  ],
    "js": [ "PATH_TO_CONTENT/content.js" ], // Change this line
    "all_frames": true
  }],

检查您是否已登录，上面的答案是正确的，但听起来您真正想要的是为什么会发生“无法加载JavaScript文件”的答案。

- phsource

---

要解决下一个问题“我是否已登录”，我必须先解决第一个问题。 - Umbro

在这种情况下，您应该尝试此答案中的解决方案！它特别针对该问题设计。 - phsource

我把 content.hs 放在 manifest.json 相同的文件夹中，但它不起作用。 - Umbro

Answer 3

你应该将你的 content.js 放在 public 文件夹中，然后在 index.html 中添加。

<script src="%PUBLIC_URL%/content.js"></script>

- Iosif Atzamis