Ihr Manifest sowohl "content_scripts" hat (die auf document_idle im Kontext der Seite ausgeführt wird) und "browser_action" Skripte (die in einem isolierten Kontext ausgeführt werden, wenn die Erweiterungen Menü-Schaltfläche geklickt wird).
In popup.html Sie verweisen popup.js, so in popup.js, wenn Sie anrufen document.documentElement.outerHTML Sie den Inhalt von popup.html bekommen, nicht die aktiven Registerkarte.
Sie referenzieren sowohl popup.js als auch , was verwirrend ist. Sie führen derzeit den gleichen Code sowohl im Popup- als auch im Seitenkontext aus, bei dem es fast garantiert ist, dass das eine oder das andere ausbricht. Per Konvention verwenden Sie content.js in "content_scripts" und Referenz popup.js in der Aktion popup.html.
"content_scripts" in jede Seite ausführen, ob Benutzer auf die Erweiterung klicken oder nicht. Ihr aktuelles Manifest fügt ["popup1.js","jquery-1.10.2.js","jquery-ui.js","bootstrap.min.js"] zu jede Seite hinzu, die unnötigerweise langsam ist.
Vermeiden Sie die Verwendung von jQuery in Chrome-Erweiterungen. Es ist ziemlich groß und eine Browser-Standardisierungsbibliothek fügt nicht viel hinzu, wenn Sie absolut sicher sind, dass alle Ihre Nutzer in Chrome sind. Wenn Sie ohne es nicht codieren können, dann versuchen Sie es auf Ihr Popup zu beschränken oder laden Sie es dynamisch.
Sie setzen eine "scripts": [ "background.js"], die ständig im Hintergrund läuft und in Ihrem aktuellen Code gar nicht benötigt wird. Wenn Sie Dinge außerhalb der Aktionsschaltfläche ausführen müssen, sollten Sie stattdessen verwenden.
Verwenden Sie die Chrome API, um vom Kontext des Popup auf die Seite zu gelangen. Sie müssen query chrome.tabs haben, um die aktive Registerkarte zu erhalten, und dann chrome.tabs.executeScript aufrufen, um das Skript im Kontext dieser Registerkarte auszuführen.
Googles API verwendet Rückrufe, aber in diesem Beispiel verwende ich chrome-extension-async, um Versprechungen zu erlauben (es gibt andere Bibliotheken, die das auch tun).
In popup.html (vorausgesetzt, Sie verwenden bower install chrome-extension-async):
<!doctype html>
<html>
<head>
<script type="text/javascript" src="bower_components/chrome-extension-async/chrome-extension-async.js"></script>
<script type="text/javascript" src="popup.js"></script>
</head>
<body style="width: 600px; height: 300px;">
<button value="Test" id="check-1"> </button>
</body>
</html>
In popup.js (verwerfen popup1.js):
function scrapeThePage() {
// Keep this function isolated - it can only call methods you set up in content scripts
var htmlCode = document.documentElement.outerHTML;
return htmlCode;
}
document.addEventListener('DOMContentLoaded',() => {
// Hook up #check-1 button in popup.html
const fbshare = document.querySelector('#check-1');
fbshare.addEventListener('click', async() => {
// Get the active tab
const tabs = await chrome.tabs.query({ active: true, currentWindow: true });
const tab = tabs[0];
// We have to convert the function to a string
const scriptToExec = `(${scrapeThePage})()`;
// Run the script in the context of the tab
const scraped = await chrome.tabs.executeScript(tab.id, { code: scriptToExec });
// Result will be an array of values from the execution
// For testing this will be the same as the console output if you ran scriptToExec in the console
alert(scraped[0]);
});
});
Wenn Sie es auf diese Weise tun nicht "content_scripts" in manifest.json Sie brauchen. Sie benötigen weder jQuery noch jQuery UI oder Bootstrap.
Bitte definieren Sie "Quellcode". Meinst du das HTML? die Skripte? das CSS? – Makyen
Sie laden * popup1.js * sowohl für Ihr Popup als auch als Inhaltsskript. Dies ist fast immer eine schlechte Idee ™. Sie sollten es nur als das eine oder das andere laden. Es ist sehr selten, dass Skriptdateien, außer Bibliotheken, zwischen den beiden geteilt werden. – Makyen
* Bitte laden Sie jQuery, jQueryUI und BootStrap nicht in ** alle ** Seiten ('content_scripts' mit Ihren' Matches'), es sei denn, Sie ** brauchen **. jQuery allein ist 85kB von minimiertem Code. Dies ist eine erhebliche Belastung für jede einzelne Seite *. Was ist mit denen von uns mit 100 von Tabs geöffnet? Es ist zwar möglich, dass Sie alle diese Bibliotheken * wirklich * laden müssen, aber Sie sollten das * absolute Minimum * laden, damit der Benutzer mit Ihrer Erweiterung interagieren kann (z. B. ein statisches Bild und ein Ereignishandler ohne Bibliotheken) und dann dynamisch laden alles, sobald der Benutzer tatsächlich mit Ihrer Erweiterung interagiert. – Makyen