0

I am writing a Chrome extension that adds a context menu item and performs an action when the user right-clicks a YouTube hyperlink.

My manifest file defines the background script as well as the javascript that is run when a link is clicked. Here are the relevant parts of my manifest.json file:

"background": {
    "persistent": false,
    "scripts": ["scripts/background.js"]
},

"content_scripts": [
    {
        "matches": ["*://*.youtube.com/*" , "*://youtube.com/*"],
        "js": ["scripts/click.js"]
    }
],

As you can see the background page uses the javascript file background.js and the context script uses click.js.

I am trying to debug click.js using the Chrome Developer Tools inspection utility but the problem I am running into is I can't figure out a way to get click.js to show up in the sources panel of the inspector.

If I go to the Chrome extensions page and click "Inspect views: background page" the inspector opens up but the only script shown is background.js.

If I right-click the extensions button (shown in the upper right) and select "Inspect popup" again I don't see click.js, only the javascript files that are loaded from within popup.html.

My question is, how do I debug javascript that is executed after a context menu click in Chrome? Should I "hack" it and force the script to always load click.js by adding it to the background page:

"background": {
    "persistent": false,
    "scripts": ["scripts/background.js", "scripts/click.js"]
},

If I did this, I could then see the script when inspecting the background page and set breakpoints, etc.

This seems like too much of a hack. There must be a more elegant way to inspect javascript files that aren't associated with the background page or any other html page (such as popup.html).

Is there a way to force the inspect window to load all javascript sources regardless of whether or not they are loaded with the page that is being inspected? Or is the inspection page limited to what is actually loaded, not the full set of scripts?

Thank you,

Clock

AClockworkOrangutan
  • 69
  • 1
  • 7
  • Injecting a script based on a context menu click is different than using a content script (which your manifest shows you are doing). If you're using a content script, try http://stackoverflow.com/a/8581276/2336725 and select your script's extension ID. You can also try http://stackoverflow.com/a/17120590/2336725 – Teepeemm Aug 29 '14 at 19:59
  • I guess I don't really understand the difference between content scripts and context menus. – AClockworkOrangutan Aug 29 '14 at 20:06
  • So adding a right-click context menu to Chrome and having an associated javascript source file execute after clicking the context menu item is not the same as content scripts? – AClockworkOrangutan Aug 29 '14 at 20:09
  • The right click thingy is a context menu. A [content script](https://developer.chrome.com/extensions/content_scripts) is a javascript file that is loaded as if it had been in a script tag on the web page. You can have it load under certain conditions, one of which could be after the user clicks a context menu. But there are many other ways to have a content script execute. – Teepeemm Aug 29 '14 at 21:34

0 Answers0