Question

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

我一直在努力让我的头发今天上班，但到目前为止没有运气。

我认为解决我需要的部分关键是here

这是eval（）和。之间的主要区别   chrome.tabs.executeScript（）方法：


eval（）方法不会对被评估的代码使用孤立的世界，因此被检查窗口的JavaScript状态是   可访问代码。访问JavaScript时使用此方法   被检查页面的状态是必需的。

正在评估的代码的执行上下文包括Developer Tools控制台API。例如，代码可以使用inspect（）   和$ 0。

评估的代码可能会返回传递给扩展回调的值。返回的值必须是有效的JSON对象   （它可能只包含原始JavaScript类型和非循环引用   到其他JSON对象）。处理时请注意额外的注意事项   从被检查页面接收的数据 - 执行上下文是   基本上由被检查页面控制;恶意页面可能   影响返回扩展的数据。

但我无法找到正确的位置来发送消息或执行命令以使其工作我只是反复告诉以下内容：

'undefined'的事件处理程序出错：$未定义 ReferenceError：$未定义 at Object.ftDev.processMsg（chrome-extension：//ffhninlgmdgkjlibihgejadgekgchcmd/ftDev.js:39:31）在chrome-extension：//ffhninlgmdgkjlibihgejadgekgchcmd/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） at 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

好的 - 所以我看了一下字体更换器的事情，它仍然不是我最后想要的东西但是当我查看this page时，我有一个尤里卡时刻第15次，并意识到我在某种程度上错过了页面上最重要的部分（至少为了做我想要的）这是这个方法

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

我不知道是否还有其他人需要/想要这个，但我也需要很长时间才能弄明白这一点，所以我希望将来能帮助其他人。

Answer 2

您可以在注入内容脚本的任何选项卡中轻松突出显示DOM元素。例如，请查看Font Selector extension。

由于源代码可用（并经过彻底解释），我不会在此发布。您将看到的效果是，在单击浏览器操作按钮后，鼠标光标下的每个DOM元素都会变成高亮的红色边框。

如果您想将选项卡/突出显示的元素的某些信息从标签页发送到您的背景页面，您可以通过messaging（您已经使用它，如我所见）。

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

2 个答案: