停止内容脚本在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);