Question

我正在尝试从content_script向页面正文注入一个div。我尝试使用以下代码：

方法1：

$('body').prepend('<div  id="topbar"></div >');

方法2：

$('html:not(:has(parent)) > body:first').prepend('<div  id="topbar"></div >');
// Several other similar approaches.

但是这里的问题是，它将这个div注入到它所找到的所有正文（jquery selector）中。即如果页面包含iframe，那么此div也会被注入，因为ifrmae包含一个正文。

实际上，上面显示的Approach 2在普通脚本/网络文件中效果很好，但在Chrome的content_script中却不行。请帮我解决这个问题。

content_script：

var jqueryScript = "Javascript/References/jquery-1.7.min.js";
var topBarPage = "TopBar.html";

// Handle the requests.
chrome.extension.onRequest.addListener(function(request, sender, sendResponse) {
    if(request.method == "dockPopup"){
        injectPopupToPage();
        sendResponse({});
    }
    else if(request.method == "undockPopup"){
        removePopupFromPage();
        sendResponse({});
    }
    else{
        sendResponse({});
    }
});

// Add the popup/topbar to page
function injectPopupToPage(){

    // Create script element
    var script = document.createElement('script');
    script.type = 'text/javascript';
    script.src = chrome.extension.getURL(jqueryScript);

    // Append jquery to page header.
    $('head').append(script);

    // Move the page down. >>>>>>>>>>>> Tried with various ways with no luck!!!!
    $('body').css('marginTop','39px');
    $('body').css('padding-top','64px');

    // Append the top bar to page.
    $('body').prepend('<div  id="topbar"></div >');
    $('#topbar').load(chrome.extension.getURL(topBarPage));

    $('#topbar').css({
        'background-color': '#FBC619',
        'position':'fixed',
        'left':'0',
        'top':'0',
        'width':'100%',
        'z-index':'9999'
    });
}

// Remove the Popup/Topbar from page.
function removePopupFromPage(){
    $('#topbar').remove();
    $('body').removeAttr('style');
}

的manifest.json

{
 "name": "Inject",
 "manifest_version": 2,
 "version": "0.0.0",
 "description": "Inject.",
 "browser_action": {
   "default_popup": "Popup.html"
 },
 "permissions": [
   "tabs",
   "chrome://favicon/",
   "http://*/*", 
   "https://*/*"
 ],
 "content_scripts": [
  {
    "matches": ["http://*/*"],
    "js": ["Javascript/References/jquery-1.7.min.js","Javascript/content_script.js"],
    "run_at": "document_start",
    "all_frames": true
  }
 ],
  "web_accessible_resources": ["TopBar.html","Javascript/TopBar.js","Javascript/References/jquery-1.7.min.js"]
}

Answer 1

您可以尝试：

$(document.body).prepend('<div  id="topbar"></div >');

由于您直接引用主文档（您需要遍历以获取iframe的正文），因此除了主<body>元素之外，它实际上无法选择任何内容。事实上，你没有选择任何东西;你只是将jQuery对象机器包装在常规的旧JS对象周围。

如果仍然有问题，我不知道该告诉你什么。

Answer 2

正如Rob W对评论所指出的，我需要在all_frames文件中设置manifest.json false。

以下是修改后的 manifest.json 文件：

{
 "name": "Inject",
 "manifest_version": 2,
 "version": "0.0.0",
 "description": "Inject.",
 "browser_action": {
   "default_popup": "Popup.html"
 },
 "permissions": [
   "tabs",
   "chrome://favicon/",
   "http://*/*", 
   "https://*/*"
 ],
 "content_scripts": [
  {
    "matches": ["http://*/*"],
    "js": ["Javascript/References/jquery-1.7.min.js","Javascript/content_script.js"],
    "run_at": "document_start",
    "all_frames": false
  }
 ],
  "web_accessible_resources": ["TopBar.html","Javascript/TopBar.js","Javascript/References/jquery-1.7.min.js"]
}

Answer 3

$('body:first').prepend('<div  id="topbar"></div >');
$('body').first().prepend('<div  id="topbar"></div >');
$('body').eq(0).prepend('<div  id="topbar"></div >');

all为您提供第一个body元素。

将元素追加或预先添加到页面正文中

3 个答案: