I have to make a Chrome Extension : The user can type a ID, CLASS or any CSS selector on the text input, and then, clicking on the button, display the HTML content of the selector of the active html page.
I put my click function on my popup.js file.
BUT, i can't interact with the content.js (content_script), the only js file allowed to interact with the DOM of the current tab.
I can sending message between popup.js and background.js, but not between popup.js and content.js.
My manifest file :
{
"name": "TEST 2 Extension",
"description": "TEST DOM",
"version": "2.0",
"manifest_version": 2,
"content_scripts": [
{
"matches": ["http://*/*", "https://*/*"],
"js": ["content.js"]
}
],
"background": {
"scripts": [
"background.js"
]
},
"browser_action": {
"default_popup": "popup.html"
},
"permissions": [
"activeTab",
"tabs"
]
}
My popup.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Test</title>
</head>
<body>
<h1>Extension</h1>
<input id="id" placeholder="Balise id" type="text">
<button id="btn">Check</button>
<p>Résultat : <span id="result"></span></p>
<script src="jquery.js"></script>
<script src="popup.js"></script>
</body>
</html>
And, By caricaturing, the popup.js :
$('#btn').on('click', function(){
var request = $('#id').val();
// SENDING request TO content.js => receive response from content.js :
$('#result').html(response);
});
And the content.js :
function getElement(request){
return response = $(request).html();
}
Thanks a lot!
question from:
https://stackoverflow.com/questions/65829481/get-html-content-of-the-active-tab-with-chrome-extension 与恶龙缠斗过久,自身亦成为恶龙；凝视深渊过久,深渊将回以凝视…
