從Chrome擴展程序訪問當前選項卡DOM對象

我一直在尋找如何實現這一點。我已經發現了一些文章最引人注目從Chrome擴展程序訪問當前選項卡DOM對象

Accessing Current Tab DOM Object from "popup.html"?

但是我很新的JavaScript和製作Chrome擴展，我已經進入了死衚衕。我的猜測是沒有收到迴應，這就解釋了爲什麼document.write("Hellp") 不起作用。任何幫助解決這個問題將不勝感激。

我有三個主要文件

的manifest.json

{ 
"name": "My First Extension", 
"version": "1.0", 
"description": "The first extension that I made.", 
"browser_action": 
{ 
    "default_icon": "icon.png", 
    "popup": "popup.html" 
}, 
"permissions": 
[ 
    "tabs" 
], 
"content_scripts": 
[{ 
    "matches": ["<all_urls>"], 
    "js": ["dom.js"] 
}] 
}

popup.html

<html>  
<body>  
</body>  
<script> 

chrome.tabs.getSelected(null, function(tab) 
{ 
    // Send a request to the content script. 
    chrome.tabs.sendRequest(tab.id, {action: "getDOM"}, function(response) 
    { 
    document.write("Hello"); 
    document.write(response.title) 
    }); 
}); 

</script> 
</html>

dom.js

chrome.extension.onRequest.addListener(function(request, sender, sendResponse) 
{ 
if (request.action == "getDOM") 
    sendResponse({dom: document.getElementsByTagName("body")[0]}); 
else 
    sendResponse({}); // Send nothing.. 
});

來源

2010-12-07 Blair

我看到這是一個老問題，但它沒有答案，我r進入同一個問題。也許這是一個安全功能，但你似乎無法返回一個DOM對象。但是，您可以返回文字。因此，對於dom.js：

chrome.extension.onRequest.addListener(function(request, sender, sendResponse) { 
if (request.action == "getDOM") 
    sendResponse({dom: document.body.innerHTML}); 
else 
    sendResponse({}); // Send nothing.. 
});

來源

2011-04-14 22:51:28 John

實際上，DOM對象無法發送，因爲它們[不是JSON序列化]（https://developer.chrome.com/extensions/messaging#simple）。 – 2015-12-20 08:32:12

那麼我們如何才能將DOM元素添加到彈出窗口？@GaurangTandon – Despertaweb 2016-11-16 10:42:00

我在工作，在該元素的HTML作爲傳輸文本的延伸，然後重建元素後面使用的innerHTML。希望來闡明如何從當前頁面的DOM元素**

這是我已經得到了DOM方式：

manifest.json的

{ 
    "manifest_version": 2, 
    "version" : "2.0", 
    "name": "Prettify search", 
    "description": "This extension shows a search result from the current page", 
    "icons":{ 
    "128": "./img/icon128.png", 
    "48": "./img/icon48.png", 
    "16": "./img/icon16.png" 
    }, 
"page_action": { 
    "default_icon": "./img/icon16.png", 
    "default_popup": "popup.html", 
    "default_title": "Prettify Results!" 
    }, 

// If the context is the Mach url = sends a message to eventPage.js: active icon 
    "content_scripts": [ 
    { 
     "matches": ["http://www.whatever.cat/*"], 
     "js": ["./js/content.js", "./js/jquery-3.1.1.min.js"] 
    } 
    ], 

    "permissions": [ 
    "tabs", 
    "http://www.whatever.cat/*", 
    "http://loripsum.net/*" //If you need to call and API here it goes 
    ], 

    "background":{ 
    "scripts": ["./js/eventPage.js"], 
    "persistent": false 
    } 

}

Popup.js

$(function() { 
     chrome.tabs.query({active: true, currentWindow: true}, function(tabs) { 

      chrome.tabs.sendMessage(tabs[0].id, {action: "getPage"}, function(response) { 

       var importedCode = response.searchResults; 
       var fakeHtml = document.createElement('html'); 
       fakeHtml.innerHTML = importedCode; // recieved String becomes html 


      }); 
     });

個Eventpage.js

>Able/disable the extension button 
chrome.runtime.onMessage.addListener(function(req, sender, resp) { 
    if(req.todo === 'showPageAction'){ 

     chrome.tabs.query({active:true, currentWindow:true}, function(tabs) { 
      chrome.pageAction.show(tabs[0].id); 
     }); 
    } 
});

content.js

Content_Scripts不能使用Chrome API來啓用或禁用>擴展程序圖標。我們傳遞一個消息Event_Page，JS，他的確可以使用API

chrome.runtime.sendMessage({ todo: "showPageAction"}); 
window.onload = function() { 

chrome.runtime.onMessage.addListener(
    function(request, sender, sendResponse) { 
    console.log(sender.tab ? 
       "from a content script:" + sender.tab.url : 
       "from the extension"); 
    if (request.action == "getPage"){ 
     sendResponse({searchResults: document.body.innerHTML}); 
     } 
    }); 
};

popup.html

只是鏈接popup.js

來源

2016-12-22 14:32:10 Despertaweb

從Chrome擴展程序訪問當前選項卡DOM對象

回答

相關問題