CODEWITHSUNDEEP
javascripthtmlgoogle-chrome-extension
Sofia Giannou
Sofia Giannou

Reputation: 23

beginner to chrome extension

I am trying to learn chrome extensions and I am trying to build a simple one which tries to find if there are forms or not in webpage.

My code is as simple as possible and the following snippet is content script - javascript.js and popup page - index.html.

function sendMessage() {
  chrome.extension.sendMessage({
action: "findurls"
  });
}

document.addEventListener('DOMContentLoaded', function () {
  var show = document.getElementById('show');
  show.addEventListener('click', findValidForms);
  });

const findValidForms = () => {
  let list = [];
  let message = "Available forms are: \n ";
  let forms = document.querySelectorAll('form');
  if (forms.length > 0) {
    for (var i = 0; i < forms.length; i++) {
      list.push(forms[i].action);
      message += `<a href="${list[i]}">${list[i]}</a><br />`;
    }
  }
  else {
    message = "no forms";
  }
  alert(message);
}
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>testing</title>
 
    <link rel="stylesheet" type="text/css" href="style.css">


</head>

<body>
    <div id="cgi">
        <div class="heading">
            <h3 center> Test title </h3>
        </div>
  
    <div id='ah!'> </div>
    <button id='show'>find forms</button>
    
    <script src="jquery-3.5.0.min.js"></script>
    <script type="text/javascript" src="javascript.js"></script>

</body>

</html>

manifest:
"manifest_version": 2,
    "name": "form",
    "version": "1.0",
    "description": "find form url ",
    "icons": {
        "16": "chrome_16.png",
        "32": "chrome_32.png"

    },

       "background": {
     "scripts": ["background.js"],
     "persistent": false
  },
    "content_scripts": [
        {
            "matches": [
                "<all_urls>"
            ],
            "js": [
                "javascript.js",
                "jquery-3.5.0.min.js"
            ],
            "css": [
                "style.css"
            ]
        }
    ],
    "browser_action": {
        "default_icon": "chrome_16.png",
        "default_popup":"index.html",
        "default_title": "test"
    },
    "permissions": [
        "activeTab"
    ]
}

 background.js:
  chrome.extension.onMessage.addListener(
function(request, sender, sendResponse)
{ 
    if (request.action == "findurls")
        chrome.tabs.executeScript({ file: 'test.js' });
}

);

Thanks

Upvotes: 2

Views: 114

Answers (1)

Perfect
Perfect

Reputation: 1636

Clicked the button placed in index.html, the extension should send a message to content script - javascript.js in your solution. So the content script needs a event listener that monitors the message triggered from background script. Once it's arrived, the corresponding method should be executed.

Here is the quick link to resolve but let me briefly describe here.

  1. Create a js file (ie index.js) and inject into your index.html. (honestly, popup.html and popup.js will be better than the current name - index). Give this code into the index.js
  2. In your content script - index.js, add the code to listen message sent from the popup page's script (index.js) with handler the current function you created. (Original function name was Forms)

popup.js

const sendMessage = () => {
    chrome.tabs.query(
        {
            active: true,
            currentWindow: true
        }, (tabs) => {
            chrome.tabs.sendMessage(
                tabs[0].id,
                {
                    action: "get-urls"
                }, (response) => {
                    console.log(response)
                }
            );
        }
    );
}

document.addEventListener('DOMContentLoaded', function () {
    var geturls = document.getElementById('btn-get-urls');
    geturls.addEventListener('click', sendMessage);
});

content_script.js

const FindAllForms = () => {
    let list = [],
        message = "Available forms are: \n ",
        availableForms = document.querySelectorAll('form');
    if (availableForms.length > 0) {
      for (var i = 0; i < availableForms.length; i++) {
        list.push(availableForms[i].action);
        message += "<a href=" + list[i] + ">" + list[i] + "</a>" + "\n";
      }
    }
    else {
      message = "no forms";
    }
    alert(message);
}
  
chrome.extension.onMessage.addListener(
   (request, sender, sendResponse) => { 
        if (request.action == "get-urls") {
            FindAllForms()
            sendResponse({'success': true})
        }
    }
);

In the popup script, you should send a message to current/active tab's content script as this answer.

I hope this will help you.

Thank you

Upvotes: 2

Related Questions