Ekstensi Chrome - Mendapatkan konten DOM
I'm mencoba untuk mengakses activeTab DOM konten dari popup. Berikut ini saya menyatakan:
{
"manifest_version": 2,
"name": "Test",
"description": "Test script",
"version": "0.1",
"permissions": [
"activeTab",
"https://api.domain.com/"
],
"background": {
"scripts": ["background.js"],
"persistent": false
},
"content_security_policy": "script-src 'self' 'unsafe-eval'; object-src 'self'",
"browser_action": {
"default_icon": "icon.png",
"default_title": "Chrome Extension test",
"default_popup": "index.html"
}
}I'm benar-benar bingung apakah latar belakang script (halaman acara dengan ketekunan: palsu) atau content_scripts adalah cara untuk pergi. I've baca semua dokumentasi dan lain SEBAGAINYA posting dan itu masih tidak masuk akal bagi saya.
Seseorang dapat menjelaskan mengapa saya bisa menggunakan salah satu dari yang lain.
Berikut ini adalah background.js aku've telah mencoba:
chrome.extension.onMessage.addListener(
function(request, sender, sendResponse) {
// LOG THE CONTENTS HERE
console.log(request.content);
}
);Dan saya'm hanya pelaksana ini dari popup console:
chrome.tabs.getSelected(null, function(tab) {
chrome.tabs.sendMessage(tab.id, { }, function(response) {
console.log(response);
});
});I'm mendapatkan:
Port: Could not establish connection. Receiving end does not exist. UPDATE:
{
"manifest_version": 2,
"name": "test",
"description": "test",
"version": "0.1",
"permissions": [
"tabs",
"activeTab",
"https://api.domain.com/"
],
"content_scripts": [
{
"matches": ["<all_urls>"],
"js": ["content.js"]
}
],
"content_security_policy": "script-src 'self' 'unsafe-eval'; object-src 'self'",
"browser_action": {
"default_icon": "icon.png",
"default_title": "Test",
"default_popup": "index.html"
}
}content.js
chrome.extension.onMessage.addListener(
function(request, sender, sendResponse) {
if (request.text && (request.text == "getDOM")) {
sendResponse({ dom: document.body.innertHTML });
}
}
);popup.html
chrome.tabs.getSelected(null, function(tab) {
chrome.tabs.sendMessage(tab.id, { action: "getDOM" }, function(response) {
console.log(response);
});
});Ketika saya berjalan, saya masih mendapatkan kesalahan yang sama:
undefined
Port: Could not establish connection. Receiving end does not exist. lastError:30
undefined
Syarat "latar belakang halaman", "popup", "content script" yang masih membingungkan anda, saya sangat menyarankan lebih mendalam terlihat di Google Chrome Ekstensi Dokumentasi.
Mengenai pertanyaan anda jika konten script atau latar belakang halaman adalah cara untuk pergi:
Isi script: Pasti Isi script ini adalah satu-satunya komponen ekstensi yang memiliki akses ke web-halaman's DOM.
Latar belakang halaman / Popup: Mungkin (mungkin max. 1 dari dua) Anda mungkin perlu untuk memiliki konten script lulus DOM konten ke salah satu latar belakang halaman atau popup untuk diproses lebih lanjut.
Saya ulangi bahwa saya sangat menyarankan untuk lebih berhati-hati studi dokumentasi yang tersedia! Yang mengatakan, di sini adalah contoh ekstensi yang mengambil DOM konten di StackOverflow halaman dan mengirimkannya ke halaman latar belakang, yang pada gilirannya cetakan ini di console:
background.js:
// Regex-pattern to check URLs against.
// It matches URLs like: http[s]://[...]stackoverflow.com[...]
var urlRegex = /^https?:\/\/(?:[^./?#]+\.)?stackoverflow\.com/;
// A function to use as callback
function doStuffWithDom(domContent) {
console.log('I received the following DOM content:\n' + domContent);
}
// When the browser-action button is clicked...
chrome.browserAction.onClicked.addListener(function (tab) {
// ...check the URL of the active tab against our pattern and...
if (urlRegex.test(tab.url)) {
// ...if it matches, send a message specifying a callback too
chrome.tabs.sendMessage(tab.id, {text: 'report_back'}, doStuffWithDom);
}
});content.js:
// Listen for messages
chrome.runtime.onMessage.addListener(function (msg, sender, sendResponse) {
// If the received message has the expected format...
if (msg.text === 'report_back') {
// Call the specified callback, passing
// the web-page's DOM content as argument
sendResponse(document.all[0].outerHTML);
}
});manifest.json:
{
"manifest_version": 2,
"name": "Test Extension",
"version": "0.0",
...
"background": {
"persistent": false,
"scripts": ["background.js"]
},
"content_scripts": [{
"matches": ["*://*.stackoverflow.com/*"],
"js": ["content.js"]
}],
"browser_action": {
"default_title": "Test Extension"
},
"permissions": ["activeTab"]
}
Anda don't harus menggunakan message passing untuk mendapatkan atau mengubah DOM. Saya menggunakan `chrome.tab.executeScript'instead. Dalam contoh saya, saya hanya menggunakan activeTab izin, oleh karena itu script dijalankan hanya pada tab yang aktif.
bagian dari terwujud.json
"browser_action": {
"default_title": "Test",
"default_popup": "index.html"
},
"permissions": [
"activeTab",
"<all_urls>"
]index.html
<!DOCTYPE html>
<html>
<head></head>
<body>
<button id="test">TEST!</button>
<script src="test.js"></script>
</body>
</html>test.js
document.getElementById("test").addEventListener('click', () => {
console.log("Popup DOM fully loaded and parsed");
function modifyDOM() {
//You can play with your DOM here or check URL against your regex
console.log('Tab script:');
console.log(document.body);
return document.body.innerHTML;
}
//We have permission to access the activeTab, so we can call chrome.tabs.executeScript:
chrome.tabs.executeScript({
code: '(' + modifyDOM + ')();' //argument here is a string but function.toString() returns function's code
}, (results) => {
//Here we have just the innerHTML and not DOM structure
console.log('Popup script:')
console.log(results[0]);
});
});
Bagi mereka yang mencoba gkalpak jawaban dan itu tidak bekerja,
diketahui bahwa chrome akan menambahkan isi script untuk halaman diperlukan hanya jika anda mengaktifkan ekstensi pada chrome peluncuran dan juga ide yang baik restart browser setelah membuat perubahan ini
