如何在侧边栏中加载远程 URL

Posted 2023-03-03

【中文标题】如何在侧边栏中加载远程 URL

【英文标题】：How to load remote URL inside sidebar

【发布时间】：2013-11-22 15:20:10

【问题描述】：

我正在使用下一个代码来注入侧边栏。 https://github.com/curtislacy/inject-sidebar

function handleRequest(
        //The object data with the request params
        request, 
        //These last two ones isn't important for this example, if you want know more about it visit: http://code.google.com/chrome/extensions/messaging.html
        sender, sendResponse
        ) 
        if (request.callFunction == "toggleSidebar")
                toggleSidebar();

chrome.extension.onRequest.addListener(handleRequest);

/*Small function wich create a sidebar(just to illustrate my point)*/
var sidebarOpen = false;
function toggleSidebar() 
        if(sidebarOpen) 
                var el = document.getElementById('mySidebar');
                el.parentNode.removeChild(el);
                sidebarOpen = false;
        
        else 
                var sidebar = document.createElement('div');
                sidebar.id = "mySidebar";
                sidebar.innerHTML = "\
                        <h1>Hello</h1>\
                        World!\
                ";
                sidebar.style.cssText = "\
                        position:fixed;\
                        top:0px;\
                        left:0px;\
                        width:30%;\
                        height:100%;\
                        background:white;\
                        box-shadow:inset 0 0 1em black;\
                        z-index:999999;\
                ";
                document.body.appendChild(sidebar);
                sidebarOpen = true;
        

而不是使用 innerHTML ？ （对 javascript 来说很新） 谢谢

【问题讨论】：

您复制的脚本会创建一个 div 并在其中插入一些 HTML。您要做的是加载一些外部 HTML 并插入它（仍然通过innerHTML）。看看jQuery.load（例如***.com/questions/11130586/jquery-load-html-into-div）。

介意分享我需要添加的代码吗？

无法正常工作：var url = 'http://www.cnn.com'; $("#mySidebar").attr('src', url);

【参考方案1】：

要加载远程 URL，您必须使用 iframe。但请记住，远程网页必须允许这样做（许多网页不允许）。

这是一个示例扩展，它有一个浏览器操作，可以切换活动选项卡中的侧边栏。 侧边栏显示http://www.cnn.com/。

在 manifest.json 中：

    "manifest_version": 2,
    "name":    "Test Extension",
    "version": "0.0",

    "background": 
        "persistent": false,
        "scripts":    ["./bg/background.js"]
    ,

    "content_scripts": [
        "matches":    ["*://*/*"],
        "js":         ["./fg/content.js"],
        "run_at":     "document_idle",
        "all_frames": false
    ],

    "browser_action": 
        "default_title": "Test Extension"
        //"default_icon": 
        //    "19": "img/icon19.png",
        //    "38": "img/icon38.png"
        //
    

在 background.js 中：

chrome.browserAction.onClicked.addListener(function(tab) 
    chrome.tabs.sendMessage(tab.id,  action: "toggleSidebar" );
);

在 content.js 中：

var sidebarURL = "http://www.cnn.com/";

var isSidebarOpen = false;
var sidebar = createSidebar();

/* Create a sidebar */
function createSidebar() 
    var sb = document.createElement("iframe");
    sb.id = "mySidebar";
    sb.src = sidebarURL;
    sb.style.cssText = ""
        + "border:   3px groove;\n"
        + "width:    30%;\n"
        + "height:   100%;\n"
        + "position: fixed;\n"
        + "top:      0px;\n"
        + "left:     0px;\n"
        + "z-index:  9999;\n"
        + "";
    return sb;


/* Show/Hide the SideBar */
function toggleSidebar() 
    if (isSidebarOpen) 
        document.body.removeChild(sidebar);
     else 
        document.body.appendChild(sidebar);
    
    isSidebarOpen = !isSidebarOpen;


/* Listen for message from the background-page and toggle the SideBar */
chrome.runtime.onMessage.addListener(function(msg) 
    if (msg.action && (msg.action == "toggleSidebar")) 
        toggleSidebar();
    
);

【讨论】：

非常详细的答案。再次感谢！

我正在尝试在我的 Windows 机器上运行上述内容并获得 [blocked] The page at https://www.google.com/webhp?sourceid=chrome-instant&espv=210&ie=UTF-8 ran insecure content from http:www.google.com 我猜这是因为我正在使用的 chrome 版本。我该如何解决？

我无法想象它与 Chrome 版本有什么关系。你到底在尝试什么？

获取上面的扩展，将 url 更改为 http://www.google.com 并在我的 Mac 上运行它。按预期工作。采用完全相同的扩展名，尝试在我的带有 chrome 30 的 Windows 机器上运行它，并得到了上述错误。顺便说一句，如果我将 URL 更改为 https://www.google.com 一切正常。我认为这是相关的：***.com/questions/12216208/…

当带有https 的网页尝试使用http 方案获取数据时，应该会出现该错误。无论如何，我无法在我的 Windows 上使用谷歌（因为谷歌的“SAMEORIGIN”政策），所以你应该对你的情况感到满意：D