creating new tab and pass the image url which is located in filesystem:chrome-extension
I am confused how to passing the image path
Below code is working for me, but I didn't want to show image path in URL
chrome.tabs.create({
url: chrome.extension.getURL('try.html?image='+filename)
});
So what is the appropriate way to pass param in chrome extension html file. So that html file content become dynamic.
Related
I'm currently working on a chrome extension that injects a content script into a webpage that allows the user to autofill a form, and everything seems to be working correctly, with the text inputs. But I have not been able to figure out how to upload an image programmatically (simulating user input).
I need help creating a function that takes in a parameter of image url or data uri, and automatically triggers the file upload as if the user uploaded the image manually, to an input selector of my choice. End result should still keep the thumbnail and similar resolution intact.
Scope:
triggers file(image specifically) input automatically. Must include thumbnail and similar resolution intact
must include a parameter for image url/ or data uri
must include a parameter for input selector I target
must work from a chrome extension content script
must work on any file/image input on any page would be ideal
can be written in javascript or jquery, whichever you prefer
An extension that solves this problem perfectly can be found here, so I know this is possible, I just have not been able to replicate it: https://chrome.google.com/webstore/detail/upload-image-from-url/eiglgndkjiabiepkliiemoabepkkhacb. (the code is obfuscated, so I can't figure out how to replicate.
I am setting up an extension that prefills a Google form and adds the current URL into one of the fields in the form. However, the issue is that the extension isn't able to detect the complete URL. It only detects www.xyz.com/home.html while the complete URL includes a location hash(www.xyz.com/home.html#e12345678) which is very important and will need to be added to the form. Any ideas on how I can set this up?
I use the following code:
var url = tabs[0].url;
var furl = "https://docs.google.com/forms/xyz/viewform?entry.123="+url;
window.open(furl);
I am fairly new to web scraping and trying to scrape a website using Beautifulsoup4 and requests in Python. The page contains one main image and other small alternate images.
While inspecting the required main img tag through browser, the src attribute is a valid url but while fetching the same page through python requests, the src attribute comes as a base64 string. Something like this
data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/2wBDAAoHBwgHBgoICAgLCgoLDhgQDg0NDh0VFhEYIx8lJCIfIiEmKzcvJik0KSEiMEExNDk7Pj4+JS5ESUM8SDc9Pjv/2wBDAQoLCw4NDhwQEBw7KCIoOzs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozv ...
src attribute of all other alternate images is coming in proper url form. The problem is only with main image. Is there a way to get the actual url displayed in browser instead of this base64 string ?
I have a Chrome extension that loads/injects a contentscript.js This script appends html and css to the webpage.
Currently I have the html and css written into my contentscript. What I would like is for the css itself, as well as the body of my new elements to be in separate document, mostly so it looks better than having html and css as text in a .js document.
Then in the contentscript I would do something like
node = the_html_doc.html
document.getElementsByTagName("body")[0].appendChild(node);
But how do I access such a separate document from my contentscript? It needs to be available in all tabs (I use the activeTab permission), not just the url in the manifest "matches".
A better solution would be to use a background script. What I did was to make a file called background.html that would store nothing but templates. I then had my background script (background.js) setup to communicate with my content script (content.js). The content script would send a message to the background script with a command indicating it wants a template. Leveraging jQuery, i can easily select and return a template to my content script which can then be injected into the page.
Here is the code (bits an pieces):
background.html
<div id="template-1"></div>
<div id="template-2"></div>
...
background.js
chrome.runtime.onMessage.addListener(function(cmd, sender, sendResponse){
c = JSON.parse(cmd);
if(c.cmd == "GET_TEMPLATE"){
//respond with the template referenced by c.selector
sendResponse($(c.selector).outerHTML);
}
});
content.js
var command = {cmd:"GET_TEMPLATE", selector:"#template-1"};
chrome.runtime.sendMessage(JSON.stringify(command), function(response) {
//and here you should get your template
console.log(response);
//you can start using jQuery like $(response) to alter it
});
This method has worked flawlessly for me. I not only use commands here but I use them everywhere now, it works well with message passing.
You might be able to use the web_accessible_resources manifest setting, then in your content script you can just inject a link element that points to the chrome.extension.getURL(<filename>) value for the CSS, and inject a script element of type text/html with an id, and then fetch the contents of that node and use those for your appendChild call.
My packaged app gets images from google drive and then display them on the side. But I can't get the images to be displayed. I am trying to get the url of the image so that I can put that url in an image source. The image url that I am getting is actually an html page rather than jpeg, png etc. I have looked at the reference guide for google picker but nothing seems to work.
I am using this
function pickerCallback(data) {
if (data.action == google.picker.Action.PICKED) {
var fileId = data.docs[0].id;
fileName = data.docs[0].name;
imgURL = data.docs[0].url;
}
I want to use imgURL as the source for image selection but imgURL is not something like "https//:www.example.com/image.jpg. It is rather an html page I want something that ends with file type only then it will be able to display the image. Please let me know how can I get the image to be displayed in html page of my packaged app after selecting it from google drive.
You should fetch the metadata of the image, then use the webContentLink of the image, then the user can view it in a logged in browser. See the documentation on downloads for more information.