0

Overflow Developes: I have search a lot about the textarea selection but have't found the proper solution.
Goal: I am going to build my own extension in which I want to perform some functionality. I have accessed the DOM. And further cannot able to access the only textarea.
Required: enter image description here I Want this type of working in my extension.
manifest.json

{
"manifest_version": 2,
"name": "DOM",
"version": "0.0", 
"background": {
    "persistent": false,
    "scripts": [
        "background.js"
    ]
},
"content_scripts": [
    {
        "matches": [
            "*://*.stackoverflow.com/*"
        ],
        "js": [
            "content.js"
        ]
    }
],
"browser_action": {
    "default_title": "DOM",
    "default_popup": "index.html"
},
"permissions": [
    "activeTab",
    "tabs",
    "<all_urls>"
]}

index.html

<!DOCTYPE html>
 <html>

 <head>Fayzan</head>

  <body> <button id="test">DOM!</button>
     <script src="test.js"></script>
  </body>
 </html>

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

background.js

var urlRegex = /^https?:\/\/(?:[^./?#]+\.)?stackoverflow\.com/;

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

test.js

    document.getElementById("test").addEventListener('click', () => {
    alert("DOM POPUP");
    function modifyDOM() {
        console.log('Tab script:');
        console.log(document.body);
        return document.body.innerHTML;
    }
    chrome.tabs.executeScript({
        code: '(' + modifyDOM + ')();'
    },
        (results) => {
            console.log("fayzan bhatti");
            console.log(results);
        }
    );

});
OnlyCOde
  • 1
  • 3
  • Welcome to stackoverflow, check out this page for a [guide on asking good questions](https://stackoverflow.com/help/how-to-ask). Your question is a bit vague as it currently exists. – justinw Sep 03 '22 at 13:02
  • Please post the code or error into your question, not an image. – toyota Supra Sep 03 '22 at 14:51
  • 1
    @toyotaSupra thank you for responding me..! In the above code my icon display in the chrome extension popup. But I want to target any textarea where I can use my Chrome extension. I'm unable to fetch any textarea from any website. Then I want show popup icon in that textarea – OnlyCOde Sep 05 '22 at 06:04

0 Answers0