I have a content script in a Chrome extension. I'd like to inject an element into the page, but I need to do so in such a way that the page is unaware of the injected element at all, i.e. it needs to be completely invisible to the page and only visible within the content script context. The page should not be able to locate the element (even with getElementByID), receive events related to it, or anything.
Is such a thing possible? How would I go about doing that? If it's not, what is the closest thing I can do?
If Shadow DOM as mentioned by #Xan doesn't work for you:
The next best thing would depend a lot on what you are trying to do.
A browser action might suit your needs as you could put the data/buttons/etc. you want to display there and the page would not be able to get to it. You could still run a content script to get the data needed from the page.
Related
I have two pages, one page for input, another page for the options, how to send value form page to another page on xPages Mobile Controls, or is there another way to make like this.
See my sample page:
1. Page 1:User Input
http://i1248.photobucket.com/albums/hh490/dannysumarnach/page_1_form_user_input.jpg
Page 2:Picklist
http://i1248.photobucket.com/albums/hh490/dannysumarnach/page_2_user_choice_PickList.jpg
note: the built-in typeahead not posible
Regards,
Danny
The in built type ahead is missing the dojo tundra.css file when using the single page app control. This file comes with Dojo its just not being included. Import this file to get the type ahead to work.
I'm unsure as to what you mean about passing value from one page to another, you can submit data to a document and open it in another page, add it to a scoped variable, add a parameter to the URL. All of these options will work.
Have a look at my blog post on this topic. There are a couple of gotchas to get around, most notably, ensuring the the page with your document datasource gets recalculated at the correct time. I'm working on a NotesIn9 on it.
Part 3 covers a couple of amendments to get it working with existing documents and includes a sample page that will work in the Extension Library Demo db. Note the extra view that needs to be created and other details in Part Two.
http://www.intec.co.uk/xpages-mobile-controls-and-value-pickers-part-three-client-side-approach-extended/
Actually, I want to store some data in background page and the popup page just show that part of data say Data as a div element created in background page document.createElement("div"). Here, the background page will register some listeners to the tab update and change the Data elements accordingly. What the popup will do is to get that Data and appendit use the document.appendChild(Data).
(The purpose I intend is this will cause the popup changes immediately while the tab updage is triggered.)
However, the elements are shown as usual, what I am facing very headache is I have registered the onclick for the div object in backgroundpage as onclick="chrome.extension.getBackgroundPage().somefunc()". However, the first time, all the click will triger the right behavior but after the popup loses foucs and get focus again, all the click won't work.
I try to put something like change the onclick="somefunc()" and leave the func within the script of popup page. And there I want to log whether it is called by console.log("clicked"). Here, something unbelievable happens, the function is succefully trigerred BUT the console is null here, I cannot even call chrome.extension.getBackgroundPage() as well.
Here are a list of questions, maybe very hard to express for me...
1. Whether I can reuse the DOM element from the background page to the popup page directly by appendChild(chrome.extension.getBackgroundPage().getElementById()?
2.Will the onclick event registered in the background page still work in the popup pages?
3. What's the problem with the problem I am encountering? I have tried many ways to find out the reason but all in vain at last...
Best Regards,
If you need any more information, please let me know.
(PS: I am wonderning if it is called something like the event propogation, however, I am not an expert in this two pages communicating...)
I have a page in which an augmented context menu would be natural and intuitive for a visitor. Not so different from a ton of pages, I'm sure. EDIT: Of course, I must do that without losing any of the browser's native context-menu items/actions. Just want to add an item.
Is there any way to accomplish that yet in any browser?
We can imagine (putative) markup for such a thing. Maybe somehting like:
<context n onclick="handleNewItem"> my new item </context>
where n is the line number of "my new item"
Thanks!
You could totally replace the context menu with your own, but then you'd loose the standard browser's one.
Unless you are writing a browser extension, I don't know of any way to just append commands to the browser's context menu from within javascript.
I want to use the Watir to click a link that looks like a button attached the image.
I use the following method,but doesn't works:
#browser.div(:id,"NetworkAnalysisTabPanel").div(:index,1).div(:index,1).ul(:index,1).li(:index,1).link(:index,2).click
Note:
#browser.div(:id,"NetworkAnalysisTabPanel").div(:index,1).div(:index,1).ul(:index,1).li(:index,1).link(:index,2).flash
is working fine but click is not working in IE and FF
Link looks like this:
And HMTL like this:
Note: I am able to click on the element using selenium IDE with clickAt method
Try this (not tested):
browser.link(:class => "x-tab-strip-menu").click
If you can flash the link, but click does not do what you want, see this: How to find out which JavaScript events fired?
FYI what you have are links that are using standard background images controlled via CSS magic that keys on the class of the link to know what background to set. That's where the image comes from, and why you don't see it as part of the link in the HTML.
In that control, each tab is a list item element (li) in an unordered list (ul), and each list item has an ID, so that's the easiest way to tell it which tab you are trying to click inside.
Try identifying things starting with the LI that is the tab container, as within that container there is only one instance of each link of a given class. Of the 4 links, only one is without any kind of easy identifier, and if you need to click that one you'd need to use :index, but for the other 3 links using :class ought to work. This should result in code that is less brittle and subject to being broken if the order of tabs changes, or the page is refactored.
#browser.li(:id,"NetworkAnalysisTabPanel__ext-comp-1038").link(:class, "x-tab-strip-menu").click
If the number at the end of the ID is subject to change, you can try a regular expression to match the part you can predict and is unique from the others
#browser.li(:id,/NetworkAnalysisTabPanel__ext-comp-/).link(:class, "x-tab-strip-menu").click
If you can reliably identify the object and use .flash but .click does not seem to do anything, you may have to use .fire_event('onclick') instead or .click.
#browser.li(:id,/NetworkAnalysisTabPanel__ext-comp-/).link(:class, "x-tab-strip-menu").fire_event('onclick')
If that does not work, then you need to start experimenting with likely events that the control might be looking for (which will not necessarily show up in the HTML btw.. it may be in javascript or CSS etc)
UPDATE
This is where having an live example of the control that we can interact with is critical. doing some googling on the class names I was able to find one here and that let me play with it a little, and what I discovered is that it is looking for onmousedown. so, on that site, this works
browser.li(:id, 'TabPanel1__ctl07').link(:class, 'x-tab-strip-menu').fire_event('onmousedown')
Now since those ID's may not be the best identifier, a bit more digging (using .text on the li that holds the tab parts) found me some text, which in a menu like that ought to be unique.. SO, we can change this to make things a bit more robust and clearer as to what tab I'm clicking on (this will also be less subject to breaking if the tabs change around.
browser.li(:text, 'Menu 1').link(:class, 'x-tab-strip-menu').fire_event('onmousedown')
Lastly, since the click is causing client side code to execute, you may need a brief pause (a one or two second sleep) to wait for that portion of the page to re-render etc.
I want a confirmation window on click of a browser back button. If I press yes then the previous page will get load ortherwise I will remain in the same page?
Any suggestion is highly appreciated.. But please be on track.. my question is straight forward
thx in advance..
Why do you want to do that?
You can prevent them from leaving the page by using Javascript, but if you can't use that, it's not possible to do anything about it.
Generally you should use the unload event in the body (in jQuery for instance, just add
jQuery(window).unload(function(evt){
if(!confirm('Do you really want to leave')){
evt.preventDefault();
}});
Prototype have something similar, and for pure Javascript, I guess that it still depends on the browser you're using, but window.unload = function(evt){return false;} might work.
Don't remember the correct syntax for it though.
but I do not know if you can limit that for only the back or if it will trigger for all the unloads (like clicking on a link, closing the browser etc.)
If you want to stop them because they might have unsaved data in a form, then that is ok. If you want to stop them from going back for another reason than that, I think you should rethink why.
Generally if using the back button can cause issues you already have bigger problems.
What you probably want to do is check that you do things like this:
Use POST for all requests that alter data
Use nonce's (unique ID's) to enure forms don't get submitted twice
I use noscript for this very reason. I insist on having control of my browser not the site that I am visiting. I only allow scripts for certain sites. For any site that disables my back button,I don't allow it to run scripts.