1

So I've been trying to send data from a web page to the Chrome Application (not Chrome Extension). Reading stuff around, according to me, this primarily would require the use of url_handlers for invoking Chrome App from a web page, content scripts to inject JS into the web page and/or Messaging for communication between Chrome Application and the web page.

Also, installed App from it's .crx, else loading unpacked directory leads to this error:

"content_scripts is only allowed for extensions and legacy packaged apps, but this is a packaged app."

Now, I tried injecting JS in the required site. However, on inspecting using Chrome Dev Tools, there's no such entry in the Sources->Content scripts section for that site. It simply didn't inject itself when using a Chrome App. It works perfectly with extensions but I want to use Chrome App for other functionalities.

As an alternative, I looked for Messaging examples where its usage is mentioned as:

"... your app or extension can receive and respond to messages from regular web pages."

But, somehow I couldn't get it working.
Any headers on either of the approaches? Other Suggestions?

manifest.json:

{
  "name": "App",
  "version": "1.0",
  "manifest_version": 2,
  "minimum_chrome_version": "31",
  "app": {
    "background": {
      "scripts": ["background.js"]
    }
  },
  "permissions": [
    {"fileSystem": ["write", "retainEntries", "directory"]},
    "storage",
    "http://example.com/*"
  ],
  "externally_connectable": {
    "matches": ["http://example.com/*"]
  },
  "content_scripts": [{
    "matches": ["http://example.com/*"],
    "js": ["content.js"]
  }]
}
Tejas Shah
  • 638
  • 6
  • 17

1 Answers1

2

Indeed, you can't have content scripts in an app.

However, using externally_connectable is valid.

You have already declared that you want to be externally connectable from example.com. (Note: be careful when defining match patterns, for instance this one does not cover www.example.com)

In example.com's own scripts, you can then include the following:

chrome.runtime.sendMessage("idOfYourAppHere", message, function(response) {
  /* ... */
});

And in the app (probably its background script) you can catch that with

chrome.runtime.onMessageExternal.addListener(function(message, sender, sendResponse) {
  /* ... */
  sendResponse(response); 
});

This does require you to know the ID in advance. You can pin it by packing your extension and extracting the "key" field from the manifest. See this question for some more details.

Community
  • 1
  • 1
Xan
  • 74,770
  • 16
  • 179
  • 206
  • thanks for the heads up. So content scripts is totally ruled out. That was vital info for me. Also, earlier I've been going through a version of the snippet you mentioned [here](https://developer.chrome.com/extensions/messaging#external-webpage). And indeed it worked! Figured that I was trying to `console.log()` in background.js which didn't print. This time I tried printing in the callback of example.com script and done! #Accepted :) On similar lines, How do I debug things in background.js? – Tejas Shah Jul 22 '15 at 11:41
  • 1
    You need to open the Dev Tools for `background.js`. You can do so from the `chrome://extensions` page, look for the entry for your app. Do notice that the background page will unload (and lose all console output) when idle unless Dev Tools for it is open. Also useful is the `chrome://inspect/#apps` page. – Xan Jul 22 '15 at 11:45
  • Ah got it! On clicking `background page` in "Inspect views" from the `chrome://extensions` page it opens up console for `background.js`. Even, right clicking on the Chrome App itself gives option for "Inspect background page". Thanks for notifying about `chrome://inspect/#apps` page. – Tejas Shah Jul 22 '15 at 12:38