在Chrome擴展中操縱DOM

我想了解有關Chrome擴展的知識，但我無法理解如何使用content_scripts操縱頁面的DOM。在Chrome擴展中操縱DOM

的manifest.json

{ 
    "name": "First", 
    "version": "1.0", 
    "manifest_version": 2, 
    "description": "First extension", 
    "background": { 
     "scripts": ["test.js"] 
    }, 

    "page_action": { 

     "default_icon": "icon.png", 
     "default_popup": "popup.html" 
    }, 

    "content_scripts": [ { 
     "js": [ "jquery.min.js", "popup1.js" ], 
     "matches": [ "http://*/*", "https://*/*" ] 

    } ], 

    "permissions" : [ 
     "tabs", 
     "http://*/*" 
      ] 
}

test.js

function check(tab_id, data, tab){ 

    if(tab.url.indexOf("google") > -1){ 
     chrome.pageAction.show(tab_id); 
      } 

}; 
chrome.tabs.onUpdated.addListener(check);

popup1.js

function myfunc(){ 

    var x = $('#options option:selected').text(); 
    $("body").append('Test'); 
    alert(x); 
    //window.close(); 

} 

$(document).ready(function(){ 

    $('#options').change(myfunc); 

});

上面的代碼/擴展工作正常，因爲myfunc被調用，但它不會將Test注入到google.com的主體中。

所以，我在哪裏訪問/操作DOM錯誤。

來源

2012-12-29 RanRag

首先，你不需要綁定到'ready'，因爲你的內容腳本在'document_idle'處執行（默認），這保證在DOM準備就緒後發生。其次，請提供更多關於你在'myfunc'中看到的信息：或者你在控制檯中可能存在一些錯誤，或者你確實忽視了正文中添加的文本。我不確定，是不是'$（「body」）。append（document.createTextNode（「Test」））;'？ – Stan

順便說一句，如果您在追加後關閉窗口，您如何檢查身體？ – Stan

另外我想確保你不會將'popup1.js'加載到popup.html中，並嘗試使用'popup1.js'作爲網頁的一部分並在彈出窗口中完成一些技巧時間。你有什麼要求？爲什麼你將內容腳本命名爲「彈出」？ – Stan

如果你想在瀏覽器標籤DOM上彈出事件彈出。在這種情況下，你必須從background script，或inject JavaScript傳遞一條消息content script到content script：看看

的manifest.json

{ 
    "name": "First", 
    "version": "1.0", 
    "manifest_version": 2, 
    "description": "First extension", 
    "background": { 
     "scripts": ["test.js"] 
    },  
    "page_action": { 
     "default_icon": "icon.png", 
     "default_popup": "popup.html" 
    },  
    "content_scripts": [ { 
     "js": [ "jquery.min.js", "content_script.js" ], 
     "matches": [ "http://*/*", "https://*/*" ]  
    } ], 

    "permissions" : [ 
     "tabs", 
     "http://*/*" 
      ] 
}

content_script.js

function myfunc(){ 
    var x = $('#options option:selected').text(); 
    $("body").append('<div style="width:200px; height:200px; border: 1px solid red;"></div>'); 
} 

$(document).ready(myfunc);

現在你會得到A box with red border位於頁面底部。

popup.js

function myfunc(){ 
    var x = $('#options option:selected').text(); 
    chrome.extension.sendMessage({sel_text: x}); 
} 

$(document).ready(function(){ 
    $('#options').change(myfunc); 
});

test.js（背景使用）

chrome.extension.onMessage.addListener(
    function(request, sender, sendResponse) { 
    appendTextToBody(request.sel_text); 
    }); 

function appendTextToBody(text) { 
    chrome.tabs.getSelected(null, function(tab) { 
    chrome.tabs.executeScript(tab.id, {"code" : '$("body").append("Test : "'+text+');'}) ; 
    }); 
} 

function check(tab_id, data, tab){ 
    if(tab.url.indexOf("google") > -1){ 
     chrome.pageAction.show(tab_id); 
    } 
}; 
chrome.tabs.onUpdated.addListener(check);

來源

2012-12-29 17:21:54

你的代碼工作正常。但我需要添加一個事件偵聽器來查找下拉列表中選定值的更改。因此，只要我添加'$（document）.ready（function（）{（'＃options'）。change（myfunc）; }）;'保持所有相同的上述代碼不會'工作。 – RanRag

我已更新我的答案，請看看並告訴我，如果有什麼問題..謝謝 –

感謝您的更新代碼。我嘗試過，但它仍然沒有附加任何東西到頁面的HTML。我嘗試調試，發現'appendTextToBody'被調用，'text'的值也是需要的，但是'chrome.tabs.executeScript（tab.id，{「code」：'$（「body」）。append（「測試：」'+ text +'）;'}）;'不按要求工作。 – RanRag

在Chrome擴展中操縱DOM

回答

相關問題