内容脚本中的监听器 [英] Listener in a Content Script

问题描述

让我解释我的问题。我目前正在开发一个谷歌浏览器扩展程序，它在每个网页中都将工具栏作为iframe插入。

问题是我需要在某些情况下隐藏工具栏，重新展示它和类似的东西。基本上我想把我的听众放在我的背景页面上，但它没用，因为这个页面不能操纵对象的图形。所以我的计划是把这个听众放在一个content_script上（他可以操纵对象的图形）。但第二个问题是，与背景页面相反的内容脚本并不是始终执行，而只是执行一次。

所以我问自己，如果它是可以通过在其上放置一个循环或类似的东西来使内容脚本听起来像是一个背景页面。

预先感谢。

我试过这个：

manifest.json

background_page：background.html，
browser_action：
 {
default_icon：images / extension。 png
 //popup：activateToolbar.html
}，
content_scripts：
 [{
all_frames：true，
css：[css / yourtoolbar.css]，
js：[js / jquery.js，js / yourtoolbar.js，js / listener.js]，
matches：[http：// * / *]，
run_at：document_end
}]，
permissions：[tabs， unlimitedStorage，http：// * / *，no tices]，
name：YourToolbar，
version：1.1，
description：制作您自己的工具栏
} 
  

toolbar.html

 <！ - 关闭按钮 - > 
< a href =javascript：hideToolbar（）>< input type =imagesrc =images / close.pngname =closewidth =18height =18 >< / A> 
  

Tool.js

  function hideToolbar（）
 {
 chrome.extension.sendRequest（{action：hideToolbar}）; 
 window.webkitNotifications.createHTMLNotification（'instantMessage.html'，'Ask Show Menu'）。show（）; 
} 
  

listener.js

< pre $ chrome.extension.onRequest.addListener（function（request，sender，sendResponse）{
if（request.action）
{
$（' （）;
console.log（'Received Start'）;
alert（request.action）;
console.log（'Received End'）;
}
else
{
console.log（'nothing'）;
alert（'Not For Me [listener.js]'）;
}
}）;


background.js

  chrome.extension.onRequest.addListener（function（request，sender，sendResponse）
 {
 if（request.newTab）
 {
 //创建一个新的Tab 
 chrome.tabs.create（{url：request.newTab}）; 
} 
 else if（request.newWindow）
 {
 //创建一个新窗口
 chrome.windows.create（{url：request.newWindow}）; 
} 
 else if（request.action）
 {
 chrome.tabs。 getAllInWindow（null，function（tabs）{
 $ .each（tabs，function（）{
 chrome.tabs.sendRequest（this.id，{action：hideToolbar}）; 
}）; 
}）; 
} 
}）; 
  

但问题是addListener没有阻止执行，他只是没有捕获任何东西...

解决方案

要从后台页面发送请求到内容脚本，您需要使用 chrome.tabs.sendRequest （不是 chrome.extension.sendRequest ）并提供标签ID。

在内容脚本中，您不需要定期创建 chrome.extension.onRequest.addListener ，只需创建一次即可永久存在。

编辑

要从内容脚本发送请求，您需要运行 chrome.extension.sendRequest 并将 chrome.extension.onRequest.addListener 添加到背景页面。

Let me explain my issue. I'm currently developing an Google Chrome Extension which inject a toolbar as an iframe in every web page.

The problem is that i need in some case to hide the toolbar, re-display it and things like that. Basicelly i was thinking to put my listener on my background-page, but it's useless because this page can't manipulate graphicely the object. So my plan was to put this listener on a content_script (who can manipulate graphiquely the objet). But the second problem is that a content-script in opposite to a background-page is not executed all the time but only once.

So i'm asking myself if it's possible to make a content-script sounds like a background-page, by putting a loop on it or something like that...

Thanks in advance.

I've tried this :

manifest.json

{   
    "background_page" : "background.html",
    "browser_action" :
    {
        "default_icon" : "images/extension.png"
        //"popup" : "activateToolbar.html"
    },
    "content_scripts": 
    [ {
          "all_frames": true,
          "css": ["css/yourtoolbar.css"],
          "js": ["js/jquery.js", "js/yourtoolbar.js", "js/listener.js"],
          "matches": ["http://*/*"],
          "run_at": "document_end"
    } ], 
    "permissions" : ["tabs", "unlimitedStorage", "http://*/*", "notifications"],    
    "name" : "YourToolbar",
    "version" : "1.1",
    "description" : "Make your own Toolbar"
}

toolbar.html

<!-- Close Button -->
            <a href="javascript:hideToolbar()"><input type="image" src="images/close.png" name="close" width="18" height="18"></a>

Tool.js

function hideToolbar()
{
    chrome.extension.sendRequest({action : "hideToolbar"});
    window.webkitNotifications.createHTMLNotification('instantMessage.html', 'Ask Show Menu').show();
}

listener.js

chrome.extension.onRequest.addListener(function(request, sender, sendResponse){
    if(request.action)
    {
        $('body').remove();
        console.log('Received Start');
        alert(request.action);
        console.log('Received End');
    }
    else
    {
        console.log('nothing');
        alert('Not For Me [listener.js]');
    }
});

background.js

chrome.extension.onRequest.addListener(function(request, sender, sendResponse) 
{   
    if(request.newTab) 
    {
        // Create a new Tab
        chrome.tabs.create({url: request.newTab});
    }
    else if(request.newWindow)
    {
        // Create a new Window
        chrome.windows.create({url: request.newWindow});
    }
    else if(request.action)
    {       
        chrome.tabs.getAllInWindow(null, function(tabs) {
          $.each(tabs, function() {
            chrome.tabs.sendRequest(this.id, {"action":"hideToolbar"} );
          });
        });
    }
});

But the problem is that the addListener didn't block the execution and he just didn't catch anything...

解决方案

To send a request from a background page to a content script you need to use chrome.tabs.sendRequest (not chrome.extension.sendRequest) and provide tab id.

In a content script you don't need to periodically create chrome.extension.onRequest.addListener, just create it once and it will be there permanently.

EDIT

To send a request from a content script you need to run chrome.extension.sendRequest there and add chrome.extension.onRequest.addListener to a background page.

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