Chrome扩展程序,用于关注元素面板中的项目

Question

我正在尝试开发一个chrome扩展,除此之外,还可以将一个元素集中在chrome devtools的元素面板中.

我一直在试着让我的头发上班,但到目前为止还没有运气.

我认为解决我需要的部分关键在于此

以下是eval()和chrome.tabs.executeScript()方法之间的主要区别:

• eval()方法不会对被评估的代码使用孤立的世界,因此代码可以访问被检查窗口的JavaScript状态.当需要访问被检查页面的JavaScript状态时,请使用此方法.
• 正在评估的代码的执行上下文包括Developer Tools控制台API.例如,代码可以使用inspect()和$ 0.
• 评估的代码可以返回传递给扩展回调的值.返回的值必须是有效的JSON对象(它可能只包含原始JavaScript类型和对其他JSON对象的非循环引用).处理从检查页面收到的数据时,请特别注意 - 执行上下文基本上由被检查页面控制; 恶意页面可能会影响返回到扩展的数据.

但我无法找到正确的发送消息或执行命令的地方,以便使其工作我只是反复告诉以下内容:

'undefined'的事件处理程序出错:$未定义ReferenceError:$未在chrome-extension:// ffhninlgmdgkjlibihgejadgekgchcmd的Object.ftDev.processMsg(chrome-extension://ffhninlgmdgkjlibihgejadgekgchcmd/ftDev.js:39:31)中定义/ftDev.js:16:7在chrome.Event.dispatchToListener(event_bindings:387:21)的chrome.Event.dispatch_(event_bindings:373:27)位于chrome.Event.dispatch(event_bindings:393:17)的miscellaneous_bindings: 166:35位于chrome.Event.dispatchToListener(event_bindings:387:21)位于chrome.Event.dispatch_(event_bindings:373:27)的chrome.Event.dispatch(event_bindings:393:17)位于Object.chromeHidden.Port.dispatchOnMessage (miscellaneous_bindings:254:22)event_bindings:377 chrome.Event.dispatch_

理想情况下,我想使用chrome控制台的inspect()方法而不是$()方法.

的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"]
}

然后在popup.js,background.js和devtools.js文件中有类似的代码,基本上归结为:

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*/

执行时会导致上述错误.我确信我试图在错误的上下文中执行命令,但我无法弄清楚如何应用它.在popup.js文件中,我也尝试执行$ method,如下所示

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

任何想法帮助都会很棒我可以提供更多我的代码,如果你认为这是必要的,但我认为这几乎总结了问题.

Answer 1

好的 - 所以我看了一下字体更换器的东西,它仍然不是我最终想要的东西但是当我第 15次看到这个页面时我有一个Eureka时刻并意识到我在某种程度上错过了页面上最重要的部分(至少为了做我想做的事),这就是这个方法

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

值得注意的是,出于安全原因,它不一定是个好主意,因为它不会在孤立的世界中运行代码.

无论如何 - 如果我从我的devtools页面js-code运行此代码,请执行以下操作

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

然后它会在devtools的元素页面中选择这个项目......这也让我非常开心!

:d

我不知道是否有其他人会需要/想要这个,但我也需要很长时间才能弄明白这一点,所以我希望它能帮助其他人.