正在停止chrome扩展中的内容脚本

Stopping content script in chrome extension

本文关键字：脚本 扩展 chrome      更新时间：2024-05-30

我开发了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);

window.close()用于关闭窗口，所以难怪它不起作用。

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

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;

注：

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

  • 如果内容脚本可能在网页生命周期中多次启用或禁用，则"隐藏"<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);
相关文章：