通过 chrome 扩展删除注入的脚本答案

【问题标题】：Removing the injected script through the chrome extension通过 chrome 扩展删除注入的脚本
【发布时间】：2016-06-16 19:59:12
【问题描述】：

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

问题陈述：现在我想在选择一个元素后恢复到元素的默认事件。这就是我被困在如何恢复原状的地方。

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 开发工具中创建新的 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，也可以是任何可点击的元素。

我不知道该怎么做。

【问题讨论】：

标签： javascript jquery google-chrome google-chrome-extension google-chrome-devtools

【解决方案1】：

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

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

【讨论】：

请不要将答案隐藏在 200 行代码的链接后面。在此处发布相关部分。答案是document.removeEventListener("click", onClick, true);吗？