4

我正在尝试开发一个 chrome 扩展，除其他外，它将能够将元素集中在 chrome devtools 的元素面板中。

我一直在拔头发，试图让它今天起作用，但到目前为止还没有运气。

我认为破解我需要的部分关键在这里

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

  • eval() 方法不为正在评估的代码使用孤立的世界，因此代码可以访问被检查窗口的 JavaScript 状态。当需要访问被检查页面的 JavaScript 状态时使用此方法。
  • 正在评估的代码的执行上下文包括开发者工具控制台 API。例如，代码可以使用 inspect() 和 $0。
  • 评估的代码可能会返回一个传递给扩展回调的值。返回的值必须是有效的 JSON 对象（它可能只包含原始 JavaScript 类型和对其他 JSON 对象的非循环引用）。在处理从被检查页面接收到的数据时，请格外小心——执行上下文基本上由被检查页面控制；恶意页面可能会影响返回到扩展程序的数据。

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

“未定义”的事件处理程序中的错误：$ 未定义 ReferenceError：$ 未在 Object.ftDev.processMsg (chrome-extension://ffhninlgmdgkjlibihgejadgekgchcmd/ftDev.js:39:31) 在 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 在 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() 方法而不是 $() 方法。

清单.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 文件中，我还尝试执行 $ 方法，如下所示

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

如果您认为有必要，任何想法的帮助都会令人惊叹，我可以提供更多我的代码，但我认为这几乎可以总结问题。

4

2 回答 2

8

好的 - 所以我环顾了一下字体更换器，最终它仍然不是我想要的，但是当我第 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的elements页面中选择这个项目……这也让我非常高兴！

:D

我不知道其他人是否会需要/想要这个，但我花了很长时间来弄清楚它，所以我希望它在未来对其他人有所帮助。

于 2013-01-12T19:25:05.097 回答
0

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

由于源代码可用（并已详细解释），因此我不会在此处发布。您将看到的效果是，在单击浏览器操作按钮后，鼠标光标下的每个 DOM 元素都会以红色边框突出显示。

如果您想将有关从选项卡中选择/突出显示的元素的一些信息发送到您的背景页面，您可以通过消息传递（您已经使用过它，如我所见）。

于 2013-01-12T14:39:35.900 回答