停止chrome扩展中的内容脚本

我已经开发了chrome扩展，我添加了，

chrome.browserAction.onClicked.addListener 

一旦点击该脚本将启动该脚本，该脚本将依次在单击浏览器操作的选项卡上的网页底部添加div，

我所要做的就是，我需要添加一个关闭链接，它将停止内容脚本并关闭底部的div，

我已经尝试了windows.close（），self.close（）但似乎没有任何工作，我至少希望它以第二次点击浏览器操作的方式工作，脚本应该停止。

这是我的代码，

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()用于关闭窗口，所以难怪它不起作用。

“卸载”内容脚本是不可能的，但是如果你想从DOM中删除一个元素（例如你的div ），只需：

 elem.parentNode.removeChild(elem); 

_{（无论是将此行为绑定到}

的链接/按钮还是具有浏览器操作，都会在后台页面中触发一个事件，该事件会将消息发送到相应的内容脚本，而脚本将依次删除该元素。你。（但显然前者更直接，更有效率。）

---

如果您还希望脚本停止执行某些其他操作（例如处理click事件），您可以（除其他外）将标志变量设置为false （在删除

），然后在继续执行之前检查该标志。操作（例如处理事件）：

 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; 

---

笔记：

• 如果您计划在浏览器操作按钮单击时重新启用内容脚本，则建议实施一个小机制，其中后台页面向内容脚本发送消息，要求其重新启用自身。 如果内容脚本确实已注入但已禁用，则应响应（确认它已收到消息）并重新启用自身。 如果没有响应（这意味着这是用户第一次单击此页面上的按钮，则后台页面会注入内容脚本。

• 如果内容脚本可能在网页生命周期中多次启用禁用，那么“隐藏”

  而不是删除它会更有效（例如： 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);