How can I detect in google chrome extension that I am logged in to another website?

Question

I have a web application and I've made an additional google chrome extension for it. If I am logged in to the website, how to detect it in google chrome extension, so I do not have to log again in extension. When I am logged in to the site, I want the extension to detect that I am logged in to the site and logged in automatically to the extension.

I have the following error:

Could not load JavaScript file "content.js" for content script.

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>

Update

structure folders

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

When I delete

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

the extension is loading

Answer 1

How can I authenticate a user using a chrome extension when he is already logged in in the website the extension is using.

Well this answer is a little broad, but the most common ways to authenticate are usually 2, either via cookies, or via a token signed by the backend that then tells the backend which user he is talking to.

For cookies:

If the authentication was done using cookies, then you just need to use either in your extension chrome.cookies which will allow you to use in your background script the cookies. Or if the chrome extension is using a content script then you can directly call document.cookies to retrieve the authentication cookie.

For token authentication:

If you app happens to be using OAuth2 for example, or a similar implementation in which the user is granted an access token and is stored locally to make then authentication agains the API, then you can retrieve it by just calling the location in which the token is saved.

If the token is saved in localStorage you can use the get method to retrieve the information that is kep there. Here you have more documentation about it Similarly you could access the sessionStorage in case the token is kept there Also more documentation here

Answer 2

Make sure content.js is in the same folder as manifest.json, or change the path to it within manifest.json.

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

For checking you're logged in, the answer above is the right one, but it sounds like you're really looking for the answer to why Could not load JavaScript file is occurring.