Communicating with script injected into webpage.

[godd9170]

Hey @tshaddix

Really impressed with this project, as I see some huge potential in the world of 'web-app augmentations'.

I'm trying to make use of react-chrome-redux through a script I've injected into a webpage from a chrome extension. I'm using https://github.com/KartikTalwar/gmail-chrome-extension-boilerplate/blob/master/main.js to get ahold of some gmail controls, and in order to do so, you have to inject your .js in to the page's header. Running plain React works great this way, but I also want a common redux store in the background. Attempting a similar workflow to your clicker-key example, is when I run into a snag:

chrome.runtime.connect() called from a webpage must specify an Extension ID (string) for its first argument

It seems communicating to an extension is possible, and it totally stands to reason that you need to tell chrome which one... I'm just not really sure how to do that. Is this within the scope of the project/Can you point me in the right direction?

[godd9170]

I think it might be as simple as adding in the extension id as the first parameter here: https://github.com/tshaddix/react-chrome-redux/blob/master/src/store/Store.js#L18

Would making an optional 'Extension Id' param to proxyStore make this work? I'll give it a shot once I get a chance.

https://developer.chrome.com/extensions/runtime#method-connect

[tshaddix]

Hi there, @godd9170!

I'm thrilled to hear you enjoy this package!

I've definitely seen that error before... Is the content script you're communicating with owned by the same extension that is holding your background store?

[godd9170]

It is yeah. I forked your repo and hard coded the extension Id which resolved that error... but now the a new one has cropped up. I'm too new to redux let alone chrome's utilities to know who is to blame. I'll send the new error when I get a chance. Thanks for the reply!

…

On Sun, Jan 15, 2017 at 12:12 PM Tyler Shaddix ***@***.***> wrote: Hi there, @godd9170 <https://github.com/godd9170>! I'm thrilled to hear you enjoy this package! I've definitely seen that error before... Is the content script you're communicating with owned by the same extension that is holding your background store? — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub <#47 (comment)>, or mute the thread <https://github.com/notifications/unsubscribe-auth/AENO7mDXOrIM9t9WGvQ4vi4arJDDIiBjks5rSlOIgaJpZM4Ljuxu> .

[tshaddix]

@godd9170 Hmmm that's very interesting.

If the content script is owned by the same extension as the background page, the extension id should be optional according to the chrome docs.

The ID of the extension or app to connect to. If omitted, a connection will be attempted with your own extension. Required if sending messages from a web page for web messaging.

So I'm not sure why you're getting that error. Very odd. Do you mind posting some code where you instantiate the store in the background and the proxy store in the content script?

[tshaddix]

Ahhhh now I get it:

your .js in to the page's header

So your code is actually using web-messaging! Your call is coming from the webpage itself, not the content script owned by the extension, right?

Yes, I think we should allow a variable in the Store options to take an extension id. Do you want to make a PR?

[tshaddix]

If not, I'll be happy to. Feel free to blame me for everything!

[godd9170]

Yep the second one! I'd do a PR but I can't get it to work :/. I'll push my changes to my repo and send you a note once that's done.

…

On Sun, Jan 15, 2017 at 12:27 PM Tyler Shaddix ***@***.***> wrote: Ahhhh now I get it: your .js in to the page's header So your code is actually using web-messaging <https://developer.chrome.com/extensions/manifest/externally_connectable>! Your call is coming from the webpage itself, not the content script owned by the extension, right? Yes, I think we should allow a variable in the Store options to take an extension id. Do you want to make a PR? — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub <#47 (comment)>, or mute the thread <https://github.com/notifications/unsubscribe-auth/AENO7pYdVT5ND-okKftVPvsXXwI2unWyks5rSlcIgaJpZM4Ljuxu> .

[tshaddix]

Sounds great! Happy to help wherever you need it!

[godd9170]

Ok I've taken a run at this and come up short. Here are my modifications to react-chrome-redux

godd9170@60f3ef0

And here is how I'm trying to implement it as a variant of your clicker-key example.

godd9170/clicker-key@8ee8dd4

It seems like the messages just aren't being received in background.js. I'm trying the 'web-messaging' approach, added in the 'externally_connectable' bits to the manifest and no luck. The page errors when it tries to get the response from sendMessage (https://github.com/godd9170/react-chrome-redux/blob/master/src/store/Store.js#L74).

Thoughts?

[godd9170]

Ok so this is likely why... you've got to receive the messages differently

(https://developer.chrome.com/extensions/messaging#external-webpage)

chrome.runtime.onMessageExternal.addListener(
  function(request, sender, sendResponse) {
    if (sender.url == blacklistedWebsite)
      return;  // don't allow this web page access
    if (request.openUrlInEditor)
      openUrl(request.openUrlInEditor);
  });

Would adding the onMessageExternal listener that is essentially a copy of the regular onMessage be out of scope/break the package?

[tshaddix]

Fixed in #49

[villageitservices]

My work is not related to this rep. But it is a chrome extension too. I wasn't sure why I had to use onMessageExternal even though the content script and background script are from the same extension.Thanks for your help @godd9170

[MrBlenny]

What is the status of this? I'm sufferting the same issue when trying to send messages through a script that I have injected into the page. Adding the extensionId fixes the first issue, now I have an issue with sendMessage because resp is not defined.

chrome.runtime.sendMessage(_this3.extensionId, {
          type: _constants.DISPATCH_TYPE,
          portName: _this3.portName,
          payload: data
        }, function (resp) {
          var error = resp.error,

Error in event handler for (unknown): TypeError: Cannot read property 'error' of undefined

[vhmth]

@MrBlenny you mean that you can't connect normally from a script hosted/served from your extension? Do you have some minimal code example I can run to check this out?

[MrBlenny]

The error only seemed to occur when the page does not have externally_connectable.matches set in the manifest. I resolved this issue by manually sending a message using chrome.runtime.sendMessage and only adding the proxy store if the chrome.runtime.sendMessage gets a response.

[vhmth]

@MrBlenny you shouldn't be able to send a message from a webpage to an extension without a externally_connectable matches entry. From the docs:

If externally_connectable is not declared in your extension's manifest, all extensions and apps can connect, but no webpages can connect.