Chrome Extension: get values from popup.html and from the page opened in the browser

Question

Manifest.json

{
  "manifest_version": 2,
  "name": "Sample Name",
  "version": "1.0.0",
  "description": "This is a sample description",
  "short_name": "Short Sample Name",
  "permissions": ["activeTab", "declarativeContent", "storage", "<all_urls>"],
  "content_scripts": [
    {
      "matches": ["<all_urls>"],
      "css": ["bootstrap.min.css"]    }
  ],
  "browser_action": {
    "default_title": "Does a thing when you do a thing",
    "default_popup": "popup.html",
    "default_icon": {
      "16": "icons/icon16.png",
      "32": "icons/icon48.png"
    }
  }
 }

Popup.html

<!doctype html>
<html>
  <head>
    <title>Example</title>
    <script src="accept.js"></script>
    <link rel="stylesheet" href="bootstrap.min.css">
  </head>
  <body><br>
    <div class="container">
      <h4>Setup</h4>
      <div class="form-group">
        <label for="usr">Value:</label>
        <input type="text" class="form-control" id="string" value="Hello">
      </div>       
        <button class="btn btn-primary" onclick="Execute()">Execute the function</button>
      </form>
    </div>
    <br>
    
  </body>
</html>

Accept.js

function Execute(){
    
console.log(document.getElementById("string").value);   
console.log(document.getElementById("eskere").value); // get value from the page i'm viewing while i click extension

  }

Page i'm seeing while i use the extension

<html>
  <head>
  </head>
  <body>
 <input type="text" class="form-control" id="eskere" value="Yoo" >
  </body>
</html>

So, i want to log the value of the input type in the popup.html extension, and the input type of the age while i use the extension. How can i pass correctly those parameters?

Chrome Extension: get values from popup.html and from the page opened in the browser

0 Answers0