0

I am trying to replicate search functionality through an extension similar to what page search does using Ctrl+F. I have been going through the documentation on developing a basic chrome extension. I have created below but somehow it doesn't work.

What i have done so far is, created a popup html page which will take search text as input parameter and tries to send the message to content script, as content script has access to the dom elements enabling searching can be done. I am also not sure how exactly i can do the debugging part here specially for the extension/content script.

manifest.json:

{
  "manifest_version": 2, 
  "name": "Custom Search Plugin",
  "description": "This extension allows to search for the current page",
  "version": "1.0",

  "browser_action": {
  "default_icon": "icon.png",
  "default_popup": "popup.html"
  },

  "content_scripts": [
  {
  // change 'matches' attribute to load content script(search.js) only  in pages you want to
  "matches": ["<all_urls>"],
  "js": ["jquery-1.11.3.min.js","search.js"],
  "css": ["highlight.css"]
  }
  ],

  "permissions": [
    "tabs",
    "activeTab"
  ]
}

HTML:

<!doctype html>
<html>
<head>
<title>Getting Started Extension's Popup</title>
<style>
  body {
    font-family: "Segoe UI", "Lucida Grande", Tahoma, sans-serif;
    font-size: 100%;
  }
  #searchfield{
    /* avoid an excessively wide status text */
    white-space: pre;
    text-overflow: ellipsis;
    overflow: hidden;
    max-width: 400px;
  }
</style>
<script src="popup.js"></script>
</head>
<body>
  <input type="search" name"pagesearch" id="searchfield">
</body>
</html>

Popup.js:

window.onload = function(){
  document.getElementById('searchfield').oninput = searchText;
};
function searchText(){
  var search = document.getElementById('searchfield').value;
  if(search){
      chrome.tabs.query({active: true, currentWindow: true}, function(tabs) {
          chrome.tabs.sendMessage(tabs[0].id, {greeting: search},function(response) {
            console.log(response.farewell);
          });
      });
  }
}

search.js:

chrome.runtime.onMessage.addListener(function(request, sender, sendResponse) {
    console.log(request.greeting);
});

Somewhere i am missing some important stuff. Please help!

Rakesh Kumar
  • 1
  • Possible duplicate of [Google Chrome Javascript Debugger and Content Scripts](http://stackoverflow.com/questions/895751/google-chrome-javascript-debugger-and-content-scripts) – wOxxOm Dec 20 '15 at 05:33
  • As for the response, simply send it in the listener as shown in [the documentation](https://developer.chrome.com/extensions/messaging): `sendResponse("blabla");` – wOxxOm Dec 20 '15 at 05:58
  • What specifically doesn't work, and where are you looking for console output? – Xan Dec 22 '15 at 12:00

0 Answers0