I'm trying to write a Chrome extension that as a part of what it's doing needs to add an image to the currently displayed html. I guess I need to use document.createElement and then insert it somewhere, but I'm not sure about two things:
The image comes as part of the extension, i.e. there's no direct link to it anywhere, so simply adding an img tag won't work. Unless I'm missing something.
Not Chrome-related at all: what is the best way to add the img tag to a specific location if the html elements do NOT have any id's? I can find the place I want to add the img to using regexps, and can rewrite the whole html if needed, but maybe there's a more subtle way I'm missing.
You can get image url from your extension folder by running:
var imgUrl = chrome.extension.getURL("image.png");
(it would look like this: chrome-extension://<extension_id>/image.png)
If you're using manifest-version: 2 you'll need to whitelist any resource in your extension that you inject into other documents. See this question for more info.
As to your second question - you need to provide more details. Does it have class? Do you know inside what tag is it (li, div)? You probably would be better off using jQuery for this - it has lots of pretty advanced selectors. I don't know what search criteria are you trying to use exactly so I can't suggest a concrete solution.
Related
My objective: add a way for users to print attached files that are linked to a report when printing the report.
I am trying to do it this way so I can embed them and print it all in one file(users mostly use print to pdf) so I would like to have an embedded object that is the exact height it needs for the document so there is no scroll bar and the embeded items are appended and viewable in the same file.
I have found that with Chrome, when pdfs are embedded there is html information that I could use to do this, but I have no idea how to access it from the parent page.
Below are some screenshots of an example in w3 schools tryit editor. the object I need to access is the div #sizer because it is the height the window needs to be to hold the pdf with no overflow.
I have tried a lot of different jquery selectors in order to try this but continue to get "undefined" as an output for all of the selectors I try.
I have read some documentation about content scripts, but am not sure how to use them or if it would solve my problem. I have also looked at using PDF.js but it hasn't worked so far.
If anyone knows if this is possible any information would be awesome.
If anyone knows that this is completely impossible, please let me know so I can go about this a different way.
Solved the issue by going a separate route, I removed it from the HTML before I made a pdf.
I want to filter only the a's that are really shown currently in the browser.
I used getBoundingClientRect function, but there are still some cases that I can't filter - like hidden or covered a tags.
Is there a more generic way in pure javascript to know exactly what are the a tags that are really shown currently and the user really can see?
I need it for my chrome extension that uses these tags. So if there is a way to do it using chrome extension API it is a good solution too.
But Mostly the problem is li tags where not all the elements inside the list are shown. How can I know what elements are shown and what not?
Thanks!
When analyzing a webpage, I usually open these js files one after another and then read the source code to determine which file added a certain portion of html in the final rendered page. Is there an easy way / tool to solve this problem?
No, there is not a tool to do such a thing. Understanding the code yourself or searching for specific key phrases in the HTML you're trying to source (such as a class name or tag name or piece of text) is the typical method.
It could work to grep for the common ways that the DOM is modified (.innerHTML property, .appendChild(), .insertBefore, etc... if it's plain javascript) or similar methods in whatever library is being used.
Partially, you may use Firebug in Mozilla and, viewing the HTML tab, right click some tags and tick "break on child addition/removal". And then reload the page. Javascript execution will pause at any changing of DOM inside the chosen element.
I am trying to allow very primitive customization based on being able to pass a variable through the URL. For example, if they come to my site through the following:
http://my.stackexchange.com?c=alpha
I would be able to display an image, either as an tag or as a background-image, whatever is feasiable, called image-a.png
But if they come through with a different value:
http://my.stackexchange.com?c=beta
Then the image is different.
This would be easier server side, but was wondering if there are ways to do that by, say, using javascript that I can call in the custom header for example. Or some other ideas?
Yes, this has already been placed on meta.stackexchange.com, but I am wondering if there are ideas from the broader programming community on how I can accomplish this with the constraints of only being able to do put html (and limited javascript it seems).
Thanks.
First get your URL parameters with jquery...
Get escaped URL parameter
... or just javascript...
How can I get query string values in JavaScript?
Now that you have the parameters you can use jquery to modify your image tag src parameter...
Change the image source on rollover using jQuery
You can do this without using jquery as well, but I'd go the jquery route because it sounds like you may have complex javascript needs.
You can view the get parameters (in this case, the "c") from javascript and use javascript to change the src of the img tag to whatever you want.
Check JQuery out...jquery.com
Here is an example from someone that may be close to what you need. http://jquery-howto.blogspot.com/2009/09/get-url-parameters-values-with-jquery.html
That shows you how to get parms...then you could use simple JQuery to load a diff image.
Assuming you will have only one parameter c, you can get it with the following line:
var c = /\?c=(.*)/.exec(document.baseURI)[1];
That should work in the perfect cases: only one and only properly-formatted parameter c. If no parameter, it would raise an error.
A more general way could be:
function getURLParameter(key) {
var ret = (new RegExp('[?](\?:.*&)*'+key+'=([^&#]*)','')).exec(document.baseURI);
return ret?ret[1]:null;
}
You can call that when the document loads and change the image accordingly. (that part should be pretty easy though)
I've been using a rteEditor very sucefully until now.
The problem is in this line of code:
document.getElementById(rteName).contentWindow.document.execCommand('insertHTML', false, html);
I'm passing an ABSOLUTE path to the html var such as ("http://www.url.com/file.html").
But when it execute this insert command the output is ("../file.html");
Its possible to use a jQuery command instead?
Any Suggestions?
Have you tried using 'insertImage' instead of 'insertHTML'?
Edit:
'insertImage' just takes the url of the image and creates an img tag based on that.
You can get the image after inserting it with jQuery like this:
var img = $("img[src='imgUrl']");
with 'imgUrl' being the url of the image you add, and then add the needed attributes to that.
An example without using jQuery is here at line 123.
In my experience, working with native rich text editors (aka div's with contentEditable="true" or iframes with designMode set to on) is very difficult. The API is inconsistent across browsers and their behavior is often unexpected and buggy. Because of this I tend to use document.execCommand() as little as possible. Instead I tend to reply on direct DOM manipulation.
With that in mind, here's how I'd try to solve the problem you described:
Create the an in-memory image element and set the appropriate url.
Find the DOM node that contains user's cursor.
Insert the in-memory image element into the DOM node found in the previous step.
The code needed to implement the second step is somewhat tricky and varies hugely across browsers. I'll try to post a working example in the next day or two. I hope this helps in the mean time.
As far as I understand, and have experienced it myself, this is 1. inherent to the browser's HTML editing engine and 2. it happens only when the image that you are trying to insert, and the address you are running the HTML editor from are on the same domain.
As a solution, if your server/provider allows this, you could set up a second subdomain that points to www, for example
www2.example.com
and link to the image as
http://www2.example.com
this should have the result that the absolute link remains untouched.
upon saving the HTML, you just have to replace all occurrences of www2.example.com to www.example.com.
Another, maybe simpler, way would be to run the WYSIWYG editor on www2.example.com and inserting the proper absolute URLs.
I think because of security reasons, you can not specify complete url such as www.example.com.
I believe that you should be able to use jQuery.
You will probably want to use something along the lines of
$(rteName).find('body').html('<img src="http://www.example.com/" alt="...">
but probably with some changes to the selector(s).