I wrote a content script for a chrome extension that parses information from a website and displays them to the user. I can see this information if I console log it so I know the script is getting the information I want, but I don't know how to send that back to the popout I made.
So for example I have a line that pulls the header from a website the user is on
titlearea = document.getElementById("titlelarge").innerText;
However when I try to set the the title element in my popout.html file to titlearea nothing happens. Obviously the information isn't getting there. How do I transfer all the data I collect?
-Thanks
in you content script, send the data you want to show to popout page with sendMessage API
then you can show the data：）
Related
I have a task where in we have specific data of an element open in a webpage and there are multiple elements data opened in multiple pages. The data I need is located at a same location in each webpage. I need to copy the entire row of that data and as sson as I flip the tab by Ctrl + tab the next data of next element should be copied too and in the end I need to export them in an excel file.
I would appreciate if someone can tell me how do I go about it.
I want this to be done as a browser extension.
You can enable a Chrome extension allowing you to execute any Javascript of your own on any website.
For example this extension "Custom JavaScript for websites" : https://chrome.google.com/webstore/detail/custom-javascript-for-web/poakhlngfciodnhlhhgnaaelnpjljija
You Copy/paste in the textarea of this extension your Javascript such as mydata = $("#element_i_want_to_copy").text(); console.log(mydata);
You can then retrieve in Chrome console the data...
If you want that the Javascript on every page send the data on a page of your own that will centralize automatically all the data sent by each Chrome tab loaded page, then you can use online (free) services like "Pusher", cf https://pusher.com/.
The Chrome extension "pushes" the data on your html page, that "receives" the message and displays it in a textarea for instance or a html of your choice...
I have a script loading a page from determined URL address - I put that script into console of a browser and it loads the JS when I submit a piece of code.
Is there a way of creating a form with a textarea where user can submit his URL address and it will load the code I put into browser console with his submitted URL? If yes, could you point me to some documentation/tutorials about it? I am not sure how it's called and would love to get some knowledge about it. Thanks!
I am a newbie to extensions. i want to create a extension, when clicked on the icon it should open up the www.gmail.com, input my user name and password and login automatically,click on the first mail. Your help is highly appreciated. I tried many things like chrome inject api but did't work out.
Like said in comments, go have a look to documentation sample codes, it's a good start.
For your extension you should do something like this :
Open a tab with the gmail.com url.
in the callback, inject a content script in the newly created tab
In the content script put the login and the password in page input and then simulate a submit button click.
Try to do this for a first try. When you get it work, You can try to open the latest email received. Look for tabs and runtime message api to send data or event between injected scripts and background script.
I have login form in chrome extension. I check if username and password true. I want if user loggined in extension content (html page ) must be change. And after that when i clicked extension logo i dont want user see login page. How can i do that?
Your question is not very clear. But seems like you want to simply display different HTML page depending on whether a user has logged into your extension.
A simple way to do that is, make user first login to your extension. Define some variable like "logged-in-state", initialize it to "not-logged-in". Change it to name that the user logged in with after successful login. Flush this information to localStorage.
Next time when your extension starts, read this variable from the disk.
Every time, any page from your extension loads, make it send a message to background script requesting for that variable. If the value is "not-logged-in" then display login/password. Otherwise, display regular content.
Basically, assign various classes dynamically to HTML content for different states like logged-in/not-logged-in and have CSS rules that will hide based on the class value.
I am in the process of making a bookmarklet that allows users to highlight text on an external web page.
It runs JavaScript code that appends a JavaScript file from my server to the current web page that takes the title of the current web page, the URL of the current web page, and then the highlight text of the current web page. Finally, the user would click a button to submit the data to my web server to be saved into the database.
I have two ways of doing this: (1) have a popup with the data in the URL as parameters, or (2) to have an iframe inserted into the current web page with a form to submit the data.
In the one with the popup (1), the users browser auto blocks the popup for every domain. How do I get around this? It seems like Facebook share and twitter tweet buttons bypass the popup blocker though...
In the one with the iframe (2), I want to remove the iframe from the DOM after submitting data. However, if I'm on another domain, I get an error saying I am denied access because of origin policy something. I know it's possible because Pinterest's bookmarklet does this, it inserts an iframe then removes it from the current DOM.
I am looking for information on how these solutions work, so I can do something similar with my bookmarklet.
I resolved this by adding a post message callback after saving the data from the iframe.