mardi 4 août 2015

Set the value of Specific HTML tag from chrome local storage

I have to save a value in chrom local stroge in my popup window, when i open the
url (e.g. www.google.com) in existing or new tab when I type www.google.com in address bar the Input id="lst-ib" in google,the input having id="lst-ib" receive value from chrome local storage which i saved in popup, how can i do this, my extentions files are: manifest.json, popup.html, style.css,bootstrap.css, popup.js,

Here is my manifest.json:

{
"manifest_version" : 2,
"name" : "Save-Query",
"description" : "Save a  Query",
"version" : "1.0",

 "browser_action" :{
     "default_icon" : "popup.png",
     "default_popup" :"popup.html",
     "default_title" : "Save a Query...!"
     },
"externally_connectable": {
  "matches": ["*://*.example.com/*"]
},
"permissions" : [
    "storage",
    "tabs",
    "activeTab",
    "notifications",
    "http://*/",
    "https://*/"
    ]

}

popup.html

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>My Name</title>
<!-- CSS -->
<link rel="stylesheet" href="bootstrap.css"/>
<link rel="stylesheet" href="style.css"/>
</head>
<body> 
<div class="searchBox">
<h2 class="text-center">Save a Query</h2>
<hr>

  <div class="col-sm-12">
    <label class="control-label" for="query">Search Query</label>
    <input class="form-control" id="query" type="text">
  </div>
  <hr>
  <div class="col-sm-12">
        <span class="notification"></span>
  </div>
  <div class="col-sm-12" style="margin-top:10px; margin-bottom:10px;">

    <button id="saveQuery" class="btn btn-success btn-sm pull-right">Save Query</button>
    <button id="clear" class="btn btn-danger btn-sm pull-right" style="margin-right:5px;">Clear</button>
  </div>

<div class="clearfix"></div>
</div>

<script src="popup.js"></script>
</body>
</html>

popup.js

var storage = chrome.storage.local;
var inputValue = document.querySelector("#query");
var resetButton = document.querySelector('button#clear');
var saveQueryBtn = document.querySelector('#saveQuery');
var notification = document.querySelector(".notification");
loadChanges();

saveQueryBtn.addEventListener("click",saveChanges);
resetButton.addEventListener('click', reset);
function saveChanges() {
        var theValue = inputValue.value;
        if (!theValue) {
            alert('Error: No Query specified');
          return;
        }
        storage.set({'myQuery': theValue}, function() {
            notification.innerHTML="Your Query Saved as "+theValue;
          });
      });
}
      function loadChanges() {
      storage.get('myQuery', function(items) {
        if (items.myQuery) {
          inputValue.value = items.myQuery;
          notification.innerHTML="Your Last Saved Query Was : "+items.myQuery;
        }
      });
    }

    function reset() {
  storage.remove('myQuery', function(items) {
notification.innerHTML="You'r just clear your memory...! ";
  });
  inputValue.value = '';
}

Aucun commentaire:

Enregistrer un commentaire