停用Chrome扩展中的内容脚本 [英] Stopping content script in chrome extension

查看：118 发布时间：2018/5/8 15:45:21 javascript jquery google-chrome google-chrome-extension google-chrome-devtools

本文介绍了停用Chrome扩展中的内容脚本的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我开发了Chrome扩展，我添加了，

  chrome.browserAction.onClicked.addListener 
 
 code>

这会在点击脚本后启动脚本，脚本会在页面底部添加一个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 =; 
 do cument.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 + =\\\
Width：; 
 css + = getComputedStyle（e.target）.width; 
 css + =\\\
Height：; 
 css + = getComputedStyle（e.target）.height; 
 css + =\\\
bg：; 
 css + = getComputedStyle（e.target）.background; 
 css + =\\\
font：; 
 css + = getComputedStyle（e.target）.font; 
 css + =\\\
vertical-align：; 
 css + = getComputedStyle（e.target）.verticalalign; 
 css + =\\\
margin：; 
 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）; 
  
 
 
解决方案
    window.close（）  是关闭窗口，所以难怪它不起作用。
 
 
 卸载内容脚本是不可能的，但如果您想要删除元素（例如你的 div ），只需要： 
 
 
  elem.parentNode.removeChild（ELEM）; 
  
 _{（无论您将此行为绑定到< div> 或者使用浏览器操作，在后台页面触发一个事件，将消息发送到相应的内容脚本，然后删除该元素取决于您。显然前者更直接更有效率。）}   
 
 
 
 
 如果你也希望你的脚本停止执行一些其他操作（例如处理点击事件），您可以（除其他外）将标志变量设置为 false （当移除< div> 时），然后在继续操作（例如处理事件）之前检查该标志： 
 
 
  var enabled = true; 
 document.addEventListener（'click'，function（evt）{
 if（！enabled）{
 / *什么也不做* / 
 return; 
} 
 
 / *我是'启用'的 - 我会处理这个* / 
 evt.pr eventDefault（）; 
 ... 
 
 / *为了禁用content-script：* / 
 div.parentNode.removeChild（div）; 
 enabled = false; 
  
 
 
 
 
 
 注意： 
 
 
 
  如果您打算在浏览器动作按钮单击时重新启用内容脚本，建议实施一个小机制，其中后台页面发送向内容脚本发送一条消息，要求它重新启用自身。如果内容脚本确实被注入但被禁用，它应该回应（确认它获得了该消息）并重新启用它自己。如果没有响应（这意味着这是用户首次单击此页面上的按钮，则背景页面将注入内容脚本。）
   
  如果它内容脚本很可能会在网页生命周期中被禁用多次，因此，将< div> 隐藏起来会更有效率（例如： div.style.display ='none'; ）。
 
 
  您只需要禁用事件处理程序，而不是使用启用的标志，那么保留对要禁用的侦听程序的引用可能更有效，并调用 < a href =https://developer.mozilla.org/en-US/docs/Web/API/EventTarget.removeEventListener =nofollow>  removeEventListener（）  。
 
 
 
 
 
 例如：
 
 
 函数clickListener（evt）{
 evt.preventDefault（）; 
 ... 
} 
 document.addEventListener（'click '，clickListener）; 
 
 / *为了禁用content-script：* / 
 div.parentNode.removeChild（div）; 
 document.removeEventListener（'click'，clickListener）; 
  
 
I have developed chrome extension , I have added ,
 chrome.browserAction.onClicked.addListener
which will start the script once clicked on , the script in turn will add a div at the bottom of the web page on the tab the browser action is clicked , 

All I have to do is , I need to add a close link which will stop the content script and close the div at the bottom ,

I have tried windows.close() , self.close() but nothing seems to work ,I would atleast want it to work in a way that 2nd time some one clicks on browser action, the script should stop.

Here is my code,

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);

 解决方案 
window.close() is for closing a window, so no wonder it does not work.

"Unloading" a content-script is not possible, but if you want to remove an element (e.g. your div) from the DOM, just do:
elem.parentNode.removeChild(elem);
_{(Whether you bind this behaviour to a link/button in your <div> or have the browser-action, trigger an event in the background-page that sends a message to the corresponding content-script which in turn removes the element is up to you. (But clearly the former is much more straight-forward and efficient.)}



If you, also, want your script to stop performing some other operation (e.g. handling click events) you could (among other things) set a flag variable to false (when removing the <div>) and then check that flag before proceeding with the operation (e.g. handling the event):
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;




Notes:


If you plan on re-enabling the content-script upon browser-action button click, it is advisable to implement a little mechanism, where the background-page sends a message to the content-script asking it to re-enable itself. If the content-script is indeed injected but disabled, it should respond back (to confirm it got the message) and re-enable itself. If there is no response (meaning this is the first time the user clicks the button on this page, the background-page injects the content script.
If it is likely for the content script to be enabled-disabled multiple times in a web-pages life-cycle, it would be more efficient to "hide" the <div> instead of removing it (e.g.: div.style.display = 'none';).
If you only need to disable event handler, instead of using the enabled flag, it is probably more efficient to keep a reference to the listener you want to disable and call removeEventListener().


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

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


                        
这篇关于停用Chrome扩展中的内容脚本的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！


                    
                        查看全文

停用Chrome扩展中的内容脚本 [英] Stopping content script in chrome extension

问题描述

相关文章

前端开发最新文章

热门教程

热门工具

登录关闭

停用Chrome扩展中的内容脚本 [英] Stopping content script in chrome extension

问题描述

相关文章

前端开发最新文章

热门教程

热门工具

登录 关闭

登录关闭