Accès à l'objet DOM de l'onglet en cours à partir d'une extension Chrome

J'ai recherché comment accomplir cette tâche. Je l'ai trouvé quelques articles plus particulièrementAccès à l'objet DOM de l'onglet en cours à partir d'une extension Chrome

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

Cependant, je suis très nouveau pour JavaScript et faire des extensions de chrome et je l'ai frappé une impasse. Je suppose que la réponse n'est pas reçue, ce qui explique pourquoi document.write("Hellp") ne fonctionne pas. Toute aide pour résoudre ce problème serait appréciée.

J'ai trois fichiers principaux

de 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"] 
}] 
}

de 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.. 
});

Source

2010-12-07 Blair

Je vois cela est une question plus , mais il est sans réponse et je un dans le même problème. Peut-être que c'est une fonctionnalité de sécurité, mais vous ne semblez pas capable de retourner un objet DOM. Vous pouvez cependant renvoyer du texte. Donc, pour dom.js:

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

Source

2011-04-14 22:51:28 John

En fait, les objets DOM ne peut pas être envoyé car ils ne sont pas [en série JSON] (https://developer.chrome.com/extensions/messaging#simple). –

Alors, comment pouvons-nous obtenir des éléments DOM à la [email protected] – Despertaweb

@Despertaweb Ça fait un an que je l'ai écrit et j'ai honnêtement oublié cette partie de mon projet. Eh bien, je pense que j'avais réussi soit en utilisant une page d'arrière-plan ou en envoyant innerHTML, et en utilisant une sorte de drapeaux globaux pour coordonner les scripts de contenu en noir et blanc et la page d'arrière-plan. Désolé d'être si peu informatif! –

Je suis workin sur une extension qui transfère le code html de l'élément comme un texte, puis la reconstruction de l'élément arrière à l'aide innerHTML. L'espoir qui précise comment obtenir les éléments DOM de la page en cours **

Ceci est la façon dont j'ai les 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 ne peuvent pas utiliser l'API Chrome pour activer ou désactiver l'icône> d'extension. Nous passons un message à Event_Page, js, il peut en effet utiliser l'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

lien juste popup.js

Source

2016-12-22 14:32:10 Despertaweb

Il peut être utile de résumer en disant que vous transférez le code HTML de l'élément en tant que texte, puis en reconstruisant l'élément à l'aide de innerHTML. –

Accès à l'objet DOM de l'onglet en cours à partir d'une extension Chrome

Répondre

Questions connexes