Handle inject page on extension icon click about react-chrome-extension-boilerplate HOT 6 OPEN

@jhen0409 Perhaps you'd be willing to elaborate? What @yiziz posted doesn't seem to work. Thanks!

from react-chrome-extension-boilerplate.

You can listen browser action and execute script in the tab via background page. (inject script in background page)

from react-chrome-extension-boilerplate.

@jhen0409 I am trying to do this also. Can you please provide an example?

I tried this, but it is not working:

    chrome.browserAction.onClicked.addListener((tab) => {
        chrome.tabs.executeScript(tab.id, { code: fetchRes, runAt: 'document_end' }, cb);
    });

from react-chrome-extension-boilerplate.

@teckays @yiziz Did either of you ever get this to work properly? Same problem here and can't figure it out.

With your implementation @yiziz I do indeed see the load inject bundle success! message in the console upon clicking the extension icon, but the dock does not appear nor does it seem to actually affect the page at all.

from react-chrome-extension-boilerplate.

@jhen0409 did you manage to resolve this? I tried it and I'm getting an error of
chrome.runtime.lastError of {message: "Could not establish connection. Receiving end does not exist."}

from react-chrome-extension-boilerplate.

I use this method
content.js

background.js

chrome.browserAction.onClicked.addListener(function (tab) {
  // Send a message to the active tab
  chrome.tabs.query({ active: true, currentWindow: true }, function (tabs) {
    var activeTab = tabs[0];
    chrome.tabs.sendMessage(activeTab.id, {
      message: 'clicked_browser_action',
    });
  });
});

chrome.runtime.onMessage.addListener(function (request) {
  if (request.message === 'clicked_browser_action') {
    // check if already injected, otherwise
	document.createElement()
	reactDOM.render()
  }
});

from react-chrome-extension-boilerplate.