停止內容腳本在Chrome擴展

Question

我開發的Chrome擴展程序，我已經加入，

chrome.browserAction.onClicked.addListener 

將啓動腳本一次點擊，反過來這個腳本會在網頁底部添加一個div該選項卡上單擊瀏覽器操作，

所有我需要做的就是，我需要添加的密切聯繫，將停止內容腳本，並在底部關閉格，

我已經試過窗口。 close（），self.close（），但似乎沒有任何工作，我會希望它w以某種方式第二次點擊瀏覽器動作時，腳本應該停止。

這裏是我的代碼，

background.js

chrome.browserAction.onClicked.addListener(function() { 
chrome.tabs.executeScript({ file: 'myscript.js' }); 
}); 

myscript.js

document.body.appendChild(div); 
    document.addEventListener("click", 
function (e) { 
e.preventDefault(); 
var check = e.target.getAttribute("id"); 
var check_class = e.target.getAttribute("class"); 
    if(check=="ospy_" || check=="ospy_id" || check=="ospy_text" || check=="ospy_el" || check=="ospy_class" || check=="ospy_name" || check=="ospy_href" || check=="ospy_src"|| check=="ospy_wrapper"|| check=="ospy_style"|| check=="ospy_rx"|| check=="ospy_con"|| check_class=="ospy_td"|| check=="ospy_main_tab"|| check_class=="ospy_tab" || check_class=="ospy_ip"|| check_class=="ospy_lab") 
    { 

     } 
else{ 
    document.getElementById('ospy_id').value = ""; 
    document.getElementById('ospy_class').value = ""; 
    document.getElementById('ospy_el').value = ""; 
    document.getElementById('ospy_name').value = ""; 
    document.getElementById('ospy_style').value = ""; 
    document.getElementById('ospy_href').value = ""; 
    document.getElementById('ospy_text').value = ""; 
    document.getElementById('ospy_src').value = ""; 
    document.getElementById('ospy_con').value = ""; 
    document.getElementById('ospy_').value = ""; 
    document.getElementById('ospy_rx').value = ""; 


    var dom_id=e.target.getAttribute("id"); 
// var dom_id = e.target.id.toString(); 
    var dom_name = e.target.name.toString(); 
    var dom_class = e.target.className.toString(); 
// var dom_class = this.class; 
    var dom_html = e.target.innerHTML; 
    var dom_href = e.target.getAttribute("href"); 
    var dom_text = e.target.text; 
    var dom_el= e.target.tagName; 
    var dom_src= e.target.src; 
    //var XPATH = e.target.innerHTML; 
    var rel_xpath = ""; 
    var field =""; 
    var field_value = ""; 

    field="id"; 
    field_value = dom_id; 
    rel_xpath = dom_el+"[@"+field+"='"+field_value+"']"; 
    if(dom_id == null){ 
     field="href"; 
    field_value= dom_href; 
    //var rel_xpath = dom_el+"[contains(text(), '"+dom_text+"')]"; 
    rel_xpath = dom_el+"[@"+field+"='"+field_value+"']"; 
     if(dom_href==null || dom_href=="#") 
      { 
      field="src"; 
      field_value= dom_src; 
      rel_xpath = dom_el+"[@"+field+"='"+field_value+"']"; 
      //rel_xpath = "nope nothing"; 
      if(dom_src==null) 
      { 
      var rel_xpath = dom_el+"[contains(text(), '"+dom_text+"')]"; 
      if(dom_text=="") 
      { 
      field="class"; 
      field_value= dom_class; 
      rel_xpath = dom_el+"[@"+field+"='"+field_value+"']"; 

       } 
       } 

      } 

     } 

    var con_xpath = ""; 
    var con_xpath = dom_el+"[contains(text(), '"+dom_text+"')]"; 
      if(dom_text==null) 
      { 
      con_xpath = "NA"; 

       } 
var css ="color: "; 
css += getComputedStyle(e.target).color; 
css +="\nWidth: "; 
css += getComputedStyle(e.target).width; 
css +="\nHeight: "; 
css += getComputedStyle(e.target).height; 
css +="\nbg: "; 
css += getComputedStyle(e.target).background; 
css +="\nfont: "; 
css += getComputedStyle(e.target).font; 
css +="\nvertical-align: "; 
css += getComputedStyle(e.target).verticalalign; 
css +="\nmargin: "; 
css += getComputedStyle(e.target).margin; 
var node = getXPath(e.target.parentNode); 



    document.getElementById('ospy_id').value = dom_id; 
    document.getElementById('ospy_class').value = dom_class; 
    document.getElementById('ospy_el').value = dom_el; 
    document.getElementById('ospy_name').value = dom_name; 
    document.getElementById('ospy_style').value = css; 
    document.getElementById('ospy_href').value = dom_href; 
    document.getElementById('ospy_text').value = dom_text; 
    document.getElementById('ospy_src').value = dom_src; 
    document.getElementById('ospy_').value = node; 
    document.getElementById('ospy_rx').value =rel_xpath; 
    document.getElementById('ospy_con').value =con_xpath; 

}}, 
    false); 

Answer 1

window.close()是關閉窗口，所以難怪它不工作。

「卸載」內容腳本是不可能的，但如果你想刪除一個元素（例如，您div）從DOM，只是做：

elem.parentNode.removeChild(elem); 

_{（不管你綁定此行爲您的<div>中的鏈接/按鈕或者瀏覽器操作，在後臺頁面中觸發一個事件，將消息發送到相應的內容腳本，然後刪除該元素取決於您（但顯然前者很多更直接，更高效。）}

---

如果您也希望您的腳本停止執行一些其他操作（例如，處理click事件），你可以（除其他事項外）設置一個標誌變量false（除去當<div>），然後在操作前，檢查標誌（如處理事件）：

var enabled = true; 
document.addEventListener('click', function (evt) { 
    if (!enabled) { 
     /* Do nothing */ 
     return; 
    } 

    /* I am 'enabled' - I'll handle this one */ 
    evt.preventDefault(); 
    ... 

/* In order to "disable" the content-script: */ 
div.parentNode.removeChild(div); 
enabled = false; 

---

注：

• 如果您打算重新啓用基於瀏覽器的操作按鈕，單擊該內容腳本，最好是實現一個小機構，其中的背景頁發送消息給內容腳本要求它t o重新啓用它自己。如果內容腳本確實被注入但被禁用，它應該回應（確認它獲得了該消息）並重新啓用它自己。如果沒有響應（這意味着這是用戶第一次單擊此頁面上的按鈕，則背景頁面會注入內容腳本）

• 如果內容腳本可能被啓用 - 禁用多次在網頁生命週期中，「隱藏」<div>而不是刪除它會更有效率（例如：div.style.display = 'none';）。

• 如果你只需要禁用而不是使用enabled標誌事件處理程序，它可能是更有效地保持到要禁用，並呼籲removeEventListener()聽者的參考。

例如爲：

function clickListener(evt) { 
    evt.preventDefault(); 
    ... 
} 
document.addEventListener('click', clickListener); 

/* In order to "disable" the content-script: */ 
div.parentNode.removeChild(div); 
document.removeEventListener('click', clickListener);