Fatal编程技术网
  • javascript/
  • Javascript 通过chrome扩展删除注入的脚本

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

javascript jquery google-chrome google-chrome-extension google-chrome-devtools

Javascript 通过chrome扩展删除注入的脚本,javascript,jquery,google-chrome,google-chrome-extension,google-chrome-devtools,Javascript,Jquery,Google Chrome,Google Chrome Extension,Google Chrome Devtools,我正在构建一个chrome开发工具扩展来捕获页面元素和存储。现在，我能够通过在注入的内容脚本中使用click方法捕获页面元素。为了将捕获的元素从内容脚本发送到后台脚本，我使用了stopPropagation和preventDefault方法禁用元素上的单击事件 问题陈述：现在我想在选择元素后恢复到元素的默认事件。这就是我被困在如何恢复的地方 manifest.json： { "name": "My app", "version": "0.0.1", "descriptio

我正在构建一个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://*/*"
    ]
}

<!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>

(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);

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;
});

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);

devtools.html
具有
devtools.js
脚本，该脚本在chrome开发工具中创建新的
选项卡
面板，并加载
面板.html

panel.html：

{
    "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://*/*"
    ]
}

<!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>

(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);

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;
});

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);
background.js：

{
    "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://*/*"
    ]
}

<!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>

(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);

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;
});

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);
selectitem.js：

{
    "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://*/*"
    ]
}

<!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>

(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);

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;
});

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);
现在，当我单击
clearscript
方法时，我想删除我在
selectitem.js
中添加的stopPropagation和preventDefault。因为我选择的元素可以是
锚定
标记或
按钮
，也可以是任何可单击的元素

我不知道怎么做。

我在这个脚本的帮助下找到了解决方案：

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

请不要将答案隐藏在指向200行代码的链接后面。在这里张贴相关部分。答案是否为
document.removeEventListener（“单击”，onClick，true）？