如何用鼠标 select 页面上的元素并将其隐藏在 javascript 中

Question

我正在为 chrome 进行测试扩展。我的问题：

是否可以为 select 一个元素创建事件脚本并用鼠标隐藏它？当您按 Shift+Ctrl+C 时，类似于检查元素 selection 工具。注意：我不希望 DOM 回流。

这是我的代码：

content.js:

var elems = document.getElementsByTagName("iframe");

$(document).ready(function() {
    for (var i = 0, max = elems.length; i < max; i++) {
        elems[i].hidden = true;
    };
});

window.onload = function() {
    for (var i = 0, max = elems.length; i < max; i++) {
        elems[i].hidden = true;
    }
};

$(window).load(function() {
    for (var i = 0, max = elems.length; i < max; i++) {
        elems[i].hidden = true;
    };
});

for (var i = 0, max = elems.length; i < max; i++) {
    elems[i].hidden = true;
};

manifest.json:

{
  "manifest_version":2,
  "name":"Test",
  "description":"A Basic program",
  "version":"0.1",
  "background":{
     "scripts":[

     ]
  },
  "content_scripts":[
     {
        "matches":[
           "<all_urls>"
        ],
        "js":[
          "jquery-3.2.1.min.js",
          "content.js"
        ]
     }
  ],

  "browser_action":{
     "default_title":"Test"
   }
 }

Answer 1

select 一个元素有多种不同的方式，隐藏它的方式也有多种。

首先，您可以使用 chrome.contextMenus.create 添加上下文菜单项。

要处理调和弦（如 SHFT+CTRL+C），您需要在页面中添加背景脚本。

在这种情况下，您可以操纵 DOM 来隐藏该元素。使用 element.style.display = 'none' 折叠其周围的内容，或使用 element.style.opacity = '0' 隐藏它同时保持页面的其余部分不变。

查看您的源代码：

var elems = document.getElementsByTagName("iframe");

好的，这应该会获取页面中的所有 <iframe> 标签，假设它们已经加载。默认情况下 content scripts fire after the DOM is complete but can be before or after the onload event.

接下来...

$(document).ready(function() { ...
window.onload = function() { ...
$(window).load(function() { ...

这些似乎是将其与已完成加载的文档挂钩的不同尝试。问题是 window.onload 可能（或可能没有）已经解雇。您可以强制内容脚本在 window.onload 之前运行，在 manifest.json 中使用 "run_at": "document_end"，但我认为这不是您想要的。

请注意，所有这些都在使用您从 DOM 获得的 elems 变量和内联脚本，因此如果 <iframe> 在事件触发之前不存在那么它就不会在数组中。

最后，所有这些似乎都在尝试循环 <iframe>s:

for (var i = 0, max = elems.length; i < max; i++) {
    elems[i].hidden = true;
};

这很好，但使用 elems[i].style.visibility = 'hidden' 可以避免回流 DOM。所以（使用 Chrome 扩展支持的 ES6 语法）：

function hideIframes() {
    const elems = document.getElementsByTagName('iframe');
    for (let e of elems) {
        e.style.visibility = 'hidden';
    };
}

// Don't do all of these - pick one that suits your context
hideIframes(); // Run inline on document_idle
$(hideIframes); // Run on jQuery complete
setTimeout(hideIframes, 3000); // Run again in 3s

我认为你的问题是当内容脚本运行s 时，你要查找的 <iframe>s 还没有出现在页面中。您可能需要针对您认为正在添加它们的特定事件添加检查。

如何用鼠标 select 页面上的元素并将其隐藏在 javascript 中

How to select an element on a page with the mouse and hide it in javascript

javascript

mouse

google-chrome-extension