Chrome extension that focuses items in elements panel

Question

I am trying to develop a chrome extension that among other things, will be able to focus an element in the elements panel of the chrome devtools.

I have been pulling my hair out trying to get this to work today but have had no luck so far.

I think part of the key to cracking what I need is here

Here are the main differences between the eval() and chrome.tabs.executeScript() methods:

• The eval() method does not use an isolated world for the code being evaluated, so the JavaScript state of the inspected window is accessible to the code. Use this method when access to the JavaScript state of the inspected page is required.
• The execution context of the code being evaluated includes the Developer Tools console API. For example, the code can use inspect() and $0.
• The evaluated code may return a value that is passed to the extension callback. The returned value has to be a valid JSON object (it may contain only primitive JavaScript types and acyclic references to other JSON objects). Please observe extra care while processing the data received from the inspected page — the execution context is essentially controlled by the inspected page; a malicious page may affect the data being returned to the extension.

But I cannot find the correct place to send the message to or execute the command in order for this to work I am just repeatedly told the following:

Error in event handler for 'undefined': $ is not defined ReferenceError: $ is not defined at Object.ftDev.processMsg (chrome-extension://ffhninlgmdgkjlibihgejadgekgchcmd/ftDev.js:39:31) at chrome-extension://ffhninlgmdgkjlibihgejadgekgchcmd/ftDev.js:16:7 at chrome.Event.dispatchToListener (event_bindings:387:21) at chrome.Event.dispatch_ (event_bindings:373:27) at chrome.Event.dispatch (event_bindings:393:17) at miscellaneous_bindings:166:35 at chrome.Event.dispatchToListener (event_bindings:387:21) at chrome.Event.dispatch_ (event_bindings:373:27) at chrome.Event.dispatch (event_bindings:393:17) at Object.chromeHidden.Port.dispatchOnMessage (miscellaneous_bindings:254:22) event_bindings:377 chrome.Event.dispatch_

Ideally I would like to use the inspect() method of the chrome console not the $() method.

manifest.json

{
    "name": "XXXXX Ad and Spotlight Debugger",
    "version": "0.1",
    "manifest_version": 2,
    "description": "A tool to help you identify and debug XXXXXX ads and spotlights in Chrome",
    "devtools_page": "ftDev.html",
    "browser_action": {
        "default_icon": "icon.png",
        "default_popup": "popup.html",
        "default_title": "XXXXXX Debug Tool"
    },
    "background": {
        "persistent": false,
        "page": "background.html",
        "js": ["background.js"]
    },
    "content_scripts": [{
        "matches": ["<all_urls>"],
        "js": ["getFTContent.js"],
        "all_frames": true
        }],
    "permissions": ["tabs","cookies","<all_urls>","devtools"]
}

Then there is similar code in the popup.js, background.js and devtools.js file that essentially boils down to this:

processMsg: function(request, sender, sendResponse) {
        switch(request.type) {
            case "inspect":
                $(request.msg);
                sendResponse(request.msg + "successfully inspected");
            break;
            default:
            break;
        }
    } /*other cases removed for sake of brevity*/

Which when executed results in the error above. I am sure that I am trying to execute the command in the wrong context but I can't figure out how to apply it. In the popup.js file I have also tried executing the $ method as below

chrome.tabs.executeScript(tabId, {code: 'function(){$("#htmlID");}'}, function(){});

Any ideas help would be amazing I can supply more of my code if you think it's necessary but I think this pretty much sums up the problem.

Answer 1

Ok - so I had a look around at the font changer thing and it still wasn't quite what I was looking for in the end but then I had a Eureka moment when I was looking over this page for about the 15th time and realised that I had somehow missed the most important part on the page (at least in order to do what I wanted) which was this method

chrome.devtools.inspectedWindow.eval("string to evaluate", callBack)

It is noted that isn't necessarily a good idea for security reasons as it it doesn't run the code in the isolated world.

Anyway - if I run this code from my devtools' page js-code with the following

chrome.devtools.inspectedWindow.eval("inspect(*id_of_the_div_i_want_inspect*)")

Then it will select this item in the elements page of the devtools... it also made me extremely happy!

:D

I don't know if anyone else will ever need/want this but it too me a long(ish) time to figure it out so I hope it helps other people in future.