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

Removing the injected script through the chrome extension

本文关键字：注入 脚本 删除 程序 chrome 扩展 通过      更新时间：2023-09-26

我正在构建一个 chrome 开发工具扩展来捕获页面元素并存储。现在，我能够通过在我注入的内容脚本中使用单击方法来捕获页面元素。为了将捕获的元素从内容脚本发送到后台脚本，我使用了 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。

面板.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>

面板.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);

背景.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;
});

选择项目.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，也可以是任何可点击的内容。

我不知道该怎么做。

我在这个

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

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

相关文章：