I have an image injected into the page from a chrome extension.
When I inspect the injected element it looks like this:
<img src="chrome-extension://edccnohanonbgondaihhbobkmhekjlpf/images/search.png" title="search">
The image does not show, but instead has the standard "not found" placeholder along with the text "search" (from the title attribute).
If I right-click the value in the src attribute and select "open in new tab", it shows the image, proving that the image exists.
I have managed to get images in chrome extensions before, but for some reason, not in this one. Are there some known limitations as to when images will work and when they wont.
I'm using:
chrome.runtime.getURL('images/search.png')
to get the image within the extension.
The difference between this extension and others is that the image is injected from a seperate source file (which is in the manifest), and called with a function call from content script (also in the manifest).
Any ideas?
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 using custom policies and all is working great except that I do not understand the following wierd behavior of the injected html. I am working on a password reset flow and adapted the starterpack.
In a ContentDefinition and indpendent from the layout version (here 2.1.2, but the problem occurs also for 2.1.0)
<DataUri>urn:com:microsoft:aad:b2c:elements:contract:selfasserted:2.1.2</DataUri>
I get a different injected html based only on whether I use the default page
<LoadUri>~/tenant/templates/AzureBlue/selfAsserted.cshtml</LoadUri>
or my custom one,
<LoadUri>https://mytenant.blob.core.windows.net/b2cweb/selfasserted.html</LoadUri>
But this custom page contains excatly the same html as the AzureBlue one. Specifically,
I navigated to the page /tenant/templates/AzureBlue/selfAsserted.cshtml , copied the html content and pasted it in my custom file in blobstorage.
Expected result
I expect the html page where the id="api" div is injected to be exactly the same if I call the LoadUri one or two. Nothing else in the custom policy files is changed.
Result
If I use the default LoadUri, the cancel button is shown just below the div id="api", as expected for a proper html document format
If I use my custom page, which again contains the same html but lives in blobstorage, the cancel button appears below the continue button in the html (but is rendered on top via css absolute positioning)
Also notice the appeareance of an empty div with class="buttons" at the beginning of the div id="api".
I need to understand what is happening for the purpose of understanding and ideally I would like the generated cancel button to appear just like the default AzureBlue.
I checked out that the old, classic userflow puts the button at the bottom, so it is as if I am using version 1.2.0 but only for my custom page, whereas my content definition is always 2.1.2 or 2.1.1.
Thanks Octopus and please find the same response here.
This is expected because of policy engine and location of storage with predefined CORS server and corresponding linked metadata files for rendering. So please use as best practices provided in the document - https://learn.microsoft.com/en-us/azure/active-directory-b2c/page-layout
I am working in Drupal 6.26 Project.I wanted to know,how to create the menu as in http://www.honda.com.my/ using drupal 6.26. which module is useful. I have used module named megamenu, but that module i cannot upload images and display those images with menu. How to display image with menu name along with readmore?
As in one of my project I have same requirement and I use Menu Icons module.
This module allows you to upload an image in the menu-item's configuration form.
After uploading the image, the icon data will be added to the menu link's
options array.
When a menu link is goes through the theme layer, it will receive an extra
class which by default is used to attach the images as a background image to the
corresponding menu item. These class names are also compatible with Nice Menu's.
Hope you will get what you want.
I'm trying to build a chrome extension that overrides a download of a file and displays it in the browser. For example if you click on a link to a '.csv' file I'd like it to render in the browser instead of downloading it.
Chrome already does it for PDF's types and the Xml Tree extension also does exactly that for xml files.
So it should be possible, just not sure how to go about catching that event?
An implementation along the lines indicated by in the previous answers and specifically designed for CSV files can be found in this extension of mine on github:
https://github.com/rgrp/chrome-csv-viewer
Furthermore, with the new(ish) chrome webrequest API a direct approach is also now possible along the following lines:
Listen to onBeforeRequest (this has to be in a background script - see background.js)
Check if this is a CSV file (mimetype or file extension)
If so cancel the request and then display the data using xhr
A working version of this can be found in a branch of that extension: https://github.com/rgrp/chrome-csv-viewer/tree/4-webrequest-intercept
You could always look at the XML Tree code :).
If you only need to work with links, and not opening files from the address bar or File > Open, you could build a content script that adds a click event listener to every link.
In the event listener function:
Add e.preventDefault() in the first line to prevent the browser 'following' the link.
Using the link href value, get the data with XMLHttpRequest.
In the XMLHttpRequest callback, open a new tab and render content accordingly.
Obviously, in many ways, this is not a great solution:
you want 'normal' links to be handled as usual by the browser
how can you tell if a text file contains comma-separated values (for example) except by looking at the file extension which, of course, may not be reliable?
Are you specifically thinking of .csv files -- and/or other specific types of content?
Export This
The above is a Data URI containing a base 64 encoded csv data export. On my app's report page, I embed the export within each page view so that an export doesn't require another trip to the database.
In Firefox 3, clicking this link opens a save-as download dialog box. Clicking it in Chrome 9 does nothing. I can right-click-save-as in Chrome, and it will write the decoded csv to a file. Clicking it in Safari opens the decoded CSV data in the browser window, which I can then save manually.
In IE... who cares, am I right?
You can reproduce this to test for yourself by copying that <a> tag in it's entirety into a blank file called test.html and open it in each browser. It acts exactly the same way as it does in the context of my app.
Question: Is there a way to force a Save As dialog to pop up, as in Firefox, when the user clicks the Data URI link? Or some other way to get around this inconsistency?
In theory, Firefox, Chrome and Safari all support Data URIs. In practice.......
Unfortunately, application/octet-stream doesn't work too well in Safari (at least Safari 6). It just saves the file as "unknown" with no Save dialog box. To my knowledge, there's no cross-browser way to do what you're trying to do except to bounce the content off a server.