Geek Answers Handbook

Search and highlight text on current page for Chrome extension

How can I connect my pages to search and highlight text on the current tab?

I currently have:

  • manifest.json does the definition of the contents of the / backgr / event page to do the essential things, code for automatic input, etc.
  • popup.html is essentially a search input wrapper that is used by search.js
  • should search.js be on the page background / event / content / popup.html?

What I still don't understand after reading:

What is a page with content or background / event?

I know that one of them constantly works against injections, but as far as I got from the chrome extension guide, I still don’t quite understand if the content of the script / page is separate from popup.html, for example, and what is the difference between the script in popup.html and content page / script.

What i know:

I know how to search for text on a page, replace it or change its style, etc. using js.

I need to read in the message API for Chrome extensions.

I know that I need to know how to use the messaging API, will it be necessary to search and highlight pages?

Summary:

I don’t need to go through the full or complete answer, just helping a little to visualize the work of Chrome extensions, or at least how I should adjust my contribution regarding interaction with IE:

search.js page content added → →> popup.html

and maybe a brief idea of ​​how the injection works in chrome extensions (IE, I only need to indicate that this is the content page in manifest.json so that it is introduced or there is more work for it) / expected behavior?

Sorry for the confused thoughts / question / maybe there are not enough things related to my questions reading the manual.

+8
javascript google-chrome google-chrome-extension
source share
2 answers

I will start with a clearer definition of each page / script type.

First it is background page/script . background script is where your extension resides. This is not required, but in order to do most of the expansion things, you need it. In it, you can configure various event listeners and, depending on what you want. He lives in his own small world and can only interact with other pages and scripts using chrome.* Apis. If you configured it as an event page, it works the same way, except that it is unloaded when not in use, and loaded back into memory when it needs to do something.

Content scripts refer to the entered Javascript and / or css. They are the main tool used to interact with web pages. They have very limited access to chrome.* Apis, but they have full access to the DOM of the page to which they are entered. We will return to their use in a minute.

Now for Popup pages . Unlike background script and content script , pop-ups have both part of HTML and JS . The HTML part is like any other page, just small and like a pop-up overlay coming out of an icon. However, the script part can do everything the background page does, except that it is unloaded whenever the popup closes.

Now that the differences are clearer, let's move on to what you want to do. It looks like you want to open a popup so that the user enters search text on the current tab, and then selects that text on the page. Since you said that you already know how you plan to highlight the text, I will leave this part to you.

First configure the manifest file. For this particular action, we do not need a background script. We need only the permissions "tabs" and "activeTab" . This will allow us to enter our script later. We also need to determine the action of the browser with its pop-up window. In general, it would look something like this:

 "browser_action": { "default_icon": "icon.png", "default_popup": "popup.html" }, "permissions": [ "tabs", "activeTab" ]

Now in our popup.html file we can only have markup and css, without inline code. We will put all this in our JS file and include it. Something like this should work:

 <!DOCTYPE html> <html> <head> <script src="popup.js"></script> </head> <body> <input type="text" id="searchText"> <button id="searchButton">Search</button> </body> </html>

Here we return to the contents of the script. There are two ways to insert script content, first define it in the manifest. This works best when you always want to enter it for a specific set of URLs. Secondly, use the chrome.tabs.executeScript method to enter it when we need to. This is what we will use.

 window.onload = function(){ document.getElementById('searchButton').onclick = searchText; }; function searchText(){ var search = document.getElementById('searchText').value; if(search){ chrome.tabs.query({active:true,currentWindow:true},function(tabs){ chrome.tabs.executeScript(tabs[0].id,{file:search.js}); chrome.tabs.sendMessage(tabs[0].id,{method:'search',searchText:search}); }); } }

In doing so, we successfully entered our script, and then sent the search text to the script. Just make sure the script is wrapped in the onMessage as follows:

 chrome.runtime.onMessage.addListener(function(message,sender,sendResponse){ // message.searchText is the text that was captured in the popup // Search/Highlight code goes here });

And that pretty much sums it up. With this, you can make it work. If something else is unclear, let me know and I will fix it.

+12
source share

I think that you are confused by the incomprehensible concept of a “content page”. There is no such. What you probably mean is a “content script”. Let me explain the three main components of an extension:

Background page

As you said, this is a constant aspect of the Chrome extension. Even if it is an HTML page, it is never displayed. You simply use it to run JavaScript and other content that remains constant. The only way to "refresh" the original page is to update the extension in the extension manager or reinstall the extension.

This is most useful for keeping information that should remain constant, such as authentication credentials or counters, which should grow over time. Use only the background page if absolutely necessary, however, since it consumes resources while the user launches the extension.

You can add a background script, as in a manafest file, for example:

 "background": { "scripts": [ "background.js" ] },

Or like this:

 "background": { "page": "background.html" },

Then just add background.js to background.html via a regular tag.

Popup

This is what you see when you click the icon on the toolbar. This is just a popup with some HTML. It can contain HTML, JavaScript, CSS and everything that you could place on the normal web page.

Not all extensions require a popup, but many do. For example, to expand your highlight, you may not need a pop-up window if all it does is select text on the page. However, if you need to collect a search result (which seems likely) or provide the user with some settings or another user interface, then a pop-up is a good way to do this.

You can add a popup to the manifest file as follows:

 "browser_action": { "default_popup": "popup.html" },

Script content

As I mentioned, this is not a "page" as such - it is a script or a set of scripts. The content of the script is what you use to direct JavaScript to pages that the user is a browser. For example, the user goes to Facebook, and the script content can change the background to red. This is almost certainly what you will need to use to highlight text on the page. Just add some JavaScript and any necessary libraries to search on the page or bypass dom and make changes to this page.

You can enter content scripts every time a user opens any URL, for example:

 "content_scripts": [ { "matches" : [ "<all_urls>" ], "js" : [ "content.js" ] } ],

The above introduce "content.js" into "all urls".

You also need to add this to the permissions:

 "permissions": [ "<all_urls>", ]

You can even add jQuery to the list of content scripts. The good thing about extensions is that the content scripts are sandboxed, so the version of jQuery you enter will not interfere with jQuery on pages visited by the user.

+4
source share

More articles:


All Articles