将dom元素从后台脚本传递给chrome.tabs.executeScript [英] pass dom element from background script to chrome.tabs.executeScript

问题描述

当我从后台脚本中点击contextmenu到正在通过chrome.tabs.executeScript调用的脚本时，我试图传递活动dom元素。我可以通过布尔值和字符串，但是当我传递dom元素时，我总是会遇到错误。我开始认为这是不可能的。

  //从浏览器动作
 chrome.browserAction调用doScripts函数。 onClicked.addListener（function（tab）{
 doScripts（true，null）; 
}）; 
 
 //从上下文菜单调用doScripts函数单击
函数getClickHandler（info，tab）{
 var currTarg = document.activeElement; 
 console.log（currTarg =+ currTarg）; 
 doScripts（false，currTarg）; 
} 
 
 //我参考了myscript.js中的doingBrowserAction和contextTarg 
函数doScripts（context，targ）{
 chrome.tabs.executeScript（null，{code ：var doingBrowserAction =+ context +; var contextTarg =+ targ +;}，function（）{
 chrome.tabs.executeScript（null，{file：js / myscript.js}，function （）{
 //全部注入
}）; 
}）; 
 
 //安装上下文菜单
 chrome.contextMenus.create（{
title：DESTROY！，
type：normal， 
contexts：[page，selection，link，editable，image，video，audio]，
onclick：getClickHandler 
}）; 
  

我在myscript.js中引用了doingBrowserAction和contextTarg。我知道我想要做什么是可能的，因为adblock扩展可以做到这一点，但很难搞清楚。提前感谢。

解决方案

您无法直接引用内容脚本的DOM元素后台页面，因为后台页面在扩展的进程中运行，并且内容脚本在标签的进程中运行。另请参阅 https://code.google.com/p/chromium/issues / detail？id = 39507 。

后台页面中的 document.activeElement 属性指背景页面文档中的活动元素。正如你可以想象的，这个值是无用的。

如果查询当前右键单击的元素的状态，请在内容脚本中绑定一个事件。在下一个示例中，我选择了 contextmenu 事件，因为上下文菜单也可以通过键盘打开。

此示例添加一个上下文菜单选项，用于从文档中删除最后一个活动元素。 $ b

  //内容脚本
 var lastElementContext; 
 document.addEventListener（'contextmenu'，function（event）{
 lastElementContext = event.target; 
}，true）; 
 chrome.runtime.onMessage.addListener（function（message，sender，sendResponse）{
 if（lastElementContext&&&lastElementContext.parentNode）{
 lastElementContext.parentNode.removeChild（lastElementContext）; 
 lastElementContext = null; 
} 
}）; 
  

后台脚本：

  chrome.contextMenus.create（{
 title：'DESTROY！'，
 contexts：['page'，'link'，'editable'， 'image'，'video'，'audio']，
 onclick：function（info，tab）{
 chrome.tabs.sendMessage（tab.id，'doDestroy'）; 
} 
}）; 
  

I'm trying to pass the active dom element when the contextmenu is clicked from my background script to a script that is being called through chrome.tabs.executeScript. I can pass booleans and strings just fine, but i always get an error when i pass dom elements. I'm starting to think it's not possible.

//doScripts function called from browser action
chrome.browserAction.onClicked.addListener(function(tab) {
    doScripts(true, null);
});

//doScripts function called from context menu click
function getClickHandler(info, tab) {
    var currTarg = document.activeElement;
    console.log("currTarg = " + currTarg);
    doScripts(false, currTarg); 
}

//i reference doingBrowserAction and contextTarg in myscript.js
function doScripts(context, targ){
    chrome.tabs.executeScript(null, {code: "var doingBrowserAction = "+context+"; var contextTarg = "+targ+";"}, function(){
        chrome.tabs.executeScript(null, {file: "js/myscript.js"}, function(){
        //all injected
        });
    });
}
//setup context menu
chrome.contextMenus.create({
  "title" : "DESTROY!",
  "type" : "normal",
  "contexts" : ["page","selection","link","editable","image","video","audio"],
  "onclick" : getClickHandler
});

i reference doingBrowserAction and contextTarg in myscript.js. I know what i'm trying to do is possible because the adblock extension does it, but having a hard time figuring out how. thanks in advance.

解决方案

You cannot get a direct reference to a content script's DOM element from the background page, because the background page runs in the extension's process, and the content script runs in the tab's process. See also https://code.google.com/p/chromium/issues/detail?id=39507.

The document.activeElement property in the background page refers to the active element in the background page's document. As you can imagine, this value is quite useless.

If you query the state of the currently right-clicked element, bind an event in the content script. In the next example, I've chosen the contextmenu event, because context menus can also be opened through the keyboard.

This example adds a context menu option that removes the last active element from the document.

// content script
var lastElementContext;
document.addEventListener('contextmenu', function(event) {
    lastElementContext = event.target;
}, true);
chrome.runtime.onMessage.addListener(function(message, sender, sendResponse) {
    if (lastElementContext && lastElementContext.parentNode) {
        lastElementContext.parentNode.removeChild(lastElementContext);
        lastElementContext = null;
    }
});

Background script:

chrome.contextMenus.create({
    title: 'DESTROY!',
    contexts: ['page', 'link', 'editable', 'image', 'video', 'audio'],
    onclick: function(info, tab) {
        chrome.tabs.sendMessage(tab.id, 'doDestroy');
    }
});

这篇关于将dom元素从后台脚本传递给chrome.tabs.executeScript的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！