通過鉻擴展刪除注入的腳本

我正在構建一個chrome dev工具擴展來捕獲頁面元素和存儲。目前，我可以通過在我注入的內容腳本中使用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或可以是任何可點擊的元素。

我不知道如何做到這一點。

來源

2016-03-03 Vimalraj Selvam