Question

我正在构建一个chrome dev工具扩展来捕获页面元素和存储。现在，我可以使用我注入的内容脚本中的click方法捕获页面元素。要将捕获的元素从内容脚本发送到后台脚本，我使用 stopPropagation 和 preventDefault 方法禁用元素上的click事件。

问题陈述：现在我想在选择元素后恢复元素的默认事件。这就是我坚持如何恢复的原因。

的manifest.json ：

{
    "name": "My app",
    "version": "0.0.1",
    "description": "My app",
    "manifest_version": 2,
    "devtools_page": "devtools.html",
    "background": {
        "scripts": [
            "background.js"
        ]
    },
    "permissions": [
        "tabs", 
        "http://*/*",
        "https://*/*",
        "file://*/*"
    ]
}

devtools.html有devtools.js脚本，可在chrome dev工具中创建新的tab面板并加载panel.html。

panel.html ：

<!DOCTYPE html>
<html lang="en">
<head>
</head>
<body>
    <button id="insertscript">Insert script</button>
    <button id="clearscript">Clear Script</button>

    <input type="text" id="tagName" />

    <script src="panel.js"></script>
    <script src="background.js"></script>
</body>
</html>

panel.js ：

(function createChannel() {
    var port = chrome.extension.connect({
        name: "Sample Communication" //Given a Name
    });

    port.onMessage.addListener(function (message) {
      document.querySelector('#tagName').value = message.tagName;
    });

}());

function sendObjectToInspectedPage(message) {
    message.tabId = chrome.devtools.inspectedWindow.tabId;
    chrome.extension.sendMessage(message);
}

document.querySelector('#insertscript').addEventListener('click', function() {
    sendObjectToInspectedPage({action: "script", content: "selectitem.js"});
}, false);

document.querySelector('#clearscript').addEventListener('click', function() {
    sendObjectToInspectedPage({action: "clear-script", content: "clearscript.js"});
}, false);

background.js ：

chrome.extension.onConnect.addListener(function (port) {
    var extensionListener = function(message, sender, sendResponse) {
        if (message.tabId && message.content) {
            // Attach a script to inspected page
            if (message.action === "script") {
                chrome.tabs.executeScript(message.tabId, {file: "assets/jquery-2.0.3.js"});
                chrome.tabs.executeScript(message.tabId, {file: message.content});
            } else if (message.action === "clear-script") {
                chrome.tabs.executeScript(message.tabId, {code: "document.removeEventListener('click', onClick);"});
            }
        } else {
            port.postMessage(message);
        }

        if (message.type === "selectedElement") {
            sendResponse(message);
        }
    };

    chrome.extension.onMessage.addListener(extensionListener);
    port.onDisconnect.addListener(function(port) {
        chrome.extension.onMessage.removeListener(extensionListener);
    });
});

chrome.runtime.onMessage.addListener(function(request, sender, sendResponse) {
    return true;
});

selectitem.js ：

function onClick(evt) {
    evt.stopPropagation();
    evt.preventDefault();

    var elem = document.elementFromPoint(evt.clientX, evt.clientY);

    chrome.extension.sendMessage({
        type: "selectedElement", 
        tagName: elem.tagName
    });
}

document.addEventListener('click', onClick, true);

现在当我点击Clear script方法时，我想删除我在selectitem.js中添加的stopPropagation和preventDefault。因为我选择的元素可以是Anchor代码或Button，也可以是可点击的内容。

我不知道如何做到这一点。

Answer 1

我在这个脚本的帮助下找到了解决方案：https://github.com/oldprojects/Simple-JavaScript-DOM-Inspector/blob/master/inspector.js

认为这可能对任何人都有帮助，因此将其作为答案添加。

通过chrome扩展程序

1 个答案: