0

So I have an extension that injects some html so that the bottom right of the screen shows some of my bookmarked websites. I want to be able to click on these elements and run code inside of my content script. Since I can access all dom elements, I thought I could do this by simply using an onclick but apparently I don't understand the scope of a content script and the page itself.

The html/css is injected via the content script and the template is imported to a host element creating a shadow dom. I didn't think shadow dom affected js scope but it's a possibility.

I have already injected some html so the possible duplicate does not apply.

the onclick looks like..

<div onclick="selectLink(0)">Link</div>

and in my content script I have

// changes the groups coresponding tab to the url specified by link
function selectLink(){
    var indexes = null;
    ship("select-link", {}, {}, indexes.group, indexes.link);
}

I have been struggling with this for a while. I just don't understand how to send events to to my app from the pages context. Do I need to add listeners? Idk, thanks for the help.

Shawn Volpe
  • 337
  • 1
  • 4
  • 10
  • The scope should be same as the page.. Is it by chance in an iframe? – loxxy Nov 23 '15 at 03:47
  • Nope, no iframe its child to body. – Shawn Volpe Nov 23 '15 at 03:51
  • Hmm.. you could try checking for an event from the extension after the dom insertion & bind the onclick event from javascript itself. Check this out https://developer.chrome.com/extensions/messaging as well – loxxy Nov 23 '15 at 03:55
  • Yea thats the connect to the rest of the extension I just want to access the content script form the injected html. And from inside the page I don't think I have access to chome apis. – Shawn Volpe Nov 23 '15 at 03:59
  • Possible duplicate of [Building a Chrome Extension - Inject code in a page using a Content script](http://stackoverflow.com/questions/9515704/building-a-chrome-extension-inject-code-in-a-page-using-a-content-script) - this mega post contains almost everything you need to know about the injected scripts, including communication. – wOxxOm Nov 23 '15 at 09:30

2 Answers2

0

Its like this. Theres 2 scopes you need to be using. 1 is the content script scope, and the other is the actual site scope. When you inject code into the page scope, for whatever event you want to handle, add an event dispatcher which sends out a customEvent to your content script. There do whatever you want to do with the data, and then send back a response via another customEvent back to the actual site scope and use it as needed.

Irtza.QC
  • 1,026
  • 2
  • 10
  • 23
0

From content script doc...

If the page wishes to communicate with the content script (or with the extension via the content script), it must do so through the shared DOM.

So I got this working by changing the DOM in some way and watching the change from the content script with .bind().

Shawn Volpe
  • 337
  • 1
  • 4
  • 10