0

Я создаю расширение инструмента chrome dev для захвата элементов страницы и сохранения. На данный момент я могу захватить элемент страницы, используя метод click в сценарии содержимого, который я ввел. Чтобы отправить захваченный элемент из сценария содержимого в фоновый скрипт, я использовал stopPropagation и preventDefault методы для отключения события click для элемента.Удаление впрыскиваемого скрипта через расширение chrome

Заявление о проблемах: Теперь я хотел бы вернуться к событию по умолчанию элемента после выбора элемента. Вот где я зациклился на том, как вернуться назад.

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 скрипт, который создает новый 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 метод, я хотел, чтобы удалить stopPropagation и preventDefault, которые я добавил в selectitem.js. Поскольку элемент, который я выбрал, может быть тегом Anchor или Button или может быть любым, что можно щелкнуть.

Я не знаю, как это сделать.

ответ

0

Я нашел решение с помощью этого сценария: https://github.com/oldprojects/Simple-JavaScript-DOM-Inspector/blob/master/inspector.js

Мысль это может быть полезным для тех, кто, следовательно, добавив в качестве ответа.

+1

Пожалуйста, не скрывайте ответ за ссылкой на 200 строк кода. Отправьте соответствующую часть здесь. Был ли ответ завершен как 'document.removeEventListener (« click », onClick, true);'? – Teepeemm

Смежные вопросы