WebExtension API: Toggle DOM replace on/off - google-chrome-extension

I'm just starting to work with the WebExtension API (on Safari rather than Chrome), and I've gotten as far as having the extension show a button in the popover ui and on clicking it the content.js script will replace any given word on a page with another given word.
This works great, but I'd like to have another button in the popover ui that easily reverses this replace call. Currently I just have it perform the same replace function but in reverse, but I'm wondering if there's a way to reverse all extension actions performed without having to define them a second time, and without simply refreshing the page to revert all changes.
Hope this makes sense, would appreciate any pointers anyone could give!

You didn't show us the code with which you make the replacements, but if you want to revolve the process a possible solution could be to wrap every single word\sentence you want to replace within a tag (e.g. span) and adding to it a property which "remember" the sostituted value.
I usually do something like this:
<span class="myExtensionId_className" data-previuosValue="foo">bar</span>

Related

Can a Chrome extension change its large (new tab page) icon?

My question is along the same lines as this: Change the Chrome extension icon
But I'm wondering instead about the large icon of the extension on a new tab page. Can it change itself based on data? All I have in mind is a simple countdown-calendar (as in, the whole point of the extension is to be a big ol' number on your new tab page), so the actual code wouldn't have to be very long, if icon-changing is possible. (It wouldn't even need to sync or connect to the Internet for any reason.)
My strong hunch is no, because I've never seen an extension do so, and I would expect that if it could, my Chrome's Gmail button would probably display the number of new messages or something. But I figured it didn't hurt to ask.
PS: I've never created a Chrome extension, I just had that idea for one just now. Anyone reading this can feel free to do it themselves, but otherwise I'll make it when I get the time, as a learning exercise.
Only apps (not extensions) can have an icon on the New Tab page (NTP).
This icon have to be declared via the icons property in the manifest file, and cannot dynamically be updated.
I can imagine two ways to get a dynamic icon on the options page:
Create an extension that replaces the New Tab page. Have a look at the docs for Override Pages.
Create an extension that uses the chrome.management API to enable/disable apps. This method might work for your personal setup, but it requires a new App for each icon. This feels a bit hacky, but hey, it might work.

How to NOT Display the URL/Location of a Browser Bookmark

I have a javascript link (works like a plugin, but not plugin, it's just a javascipt link), the user can just drag and drop the link to it's bookmark bar.
Everything is working, but when the URL/location link is too long, it's very annoying that when the use mouses over the bookmark, it will also show the URL/Location link.
So is there a way not to display the URL/Location link when mousing over?
It would be better if we can display a customized description;
It would be better if it works for all major browsers;
It would be better if it's cross-platform;
Any reasonable suggestions or even hacks are also welcomed as long as it will improve the user experience.
Thanks.
So is there a way not to display the URL/Location link when mousing over?
Not without modifying the browser at a deep level. And if you are going to do that, you don't need to use a bookmarklet.
But you can add a comment to the code to explain it.
Example:
javascript:/*--A-very-short-description--*/document.location=...
I choose to use - instead of spaces because spaces are encoded to %20, which is much worse that - for reading.
This won't hide the code, but it does make the bookmarklet slightly more friendly.
Using this, there is a slight trick that in Firefox and maybe other browsers that sort of "hides" the code. Firefox shows only the beginning and ends of the code, not all of it. So if you code begins and ends with a comment, you can effectively hide the code.
Approximate example:
javascript:/*------------------------*/document.location=.../*------------------------*/
In Firefox this will look something like "javascript:/------------...--------------/"
You can experiment with the details to get the desired result.

Sahi: Cannot execute scripts recorded in a browser in multiple browsers

Our web application is designed such that the text transform is picked from CSS.
There are multiple links on a webpage; hence i will take example of a Next link.
When i hover the mouse over Next link in FF, it shows the below code:
_click(_link("Next"));
Similarly when i hover the mouse over the same link in Chrome, it shows the below code:
_click(_link("NEXT"));
When the script is recorded in FF and executed in chrome, it fails at the location because "Next" link is unavailable. This is one example of a link and there are multiple links and multiple pages. For this scenario, do i need to verify the text for each link or is there a universal way i.e. toLowercase method that can help me.
Thanks.
As Kshitij pointed out, you can get this working by using a regular expression as your accessor... but you might also check the Alternatives pulldown in the Controller. Perhaps there's an alternative accessor that is better suited for both browsers.
I think, the question should be how can Sahi identify the element with text by ignoring the case-sensitivity.
Any tool can only record the attributes which is available on the browser at that time.
You can use the following code to achieve the functionality:
_click(_link("/Next/i"));

Does watir's browser.text.include? count text inside invisible divs? If so, how to search only for visible text?

Does watir's browser.text.include? count text inside invisible divs? If so, how to search only for visible text?
I put all the instructions into the html from the beginning and use jQuery to hide and unhide the relevant parts.
How can I use watir's waiter to wait for only text that is visible?
My problem is, that the waiter always returns true, even before I have made visible a certain text.
Don't use Watir's text method. It is very quick and dirty, and has lots of misgivings, many not even related to this issue about visible text. Solid Watir test developers will avoid it. I almost never use it myself, and only when I am doing something extremely quick and dirty. Also, it is implemented differently with different browsers.
Instead you should access the text you care about in terms of the actual element that it is in. You should reference the div or whatever.
What's wrong with:
text_from_all_my_visible_divs = br.div(:id, 'divs I care about').divs.select do |div|
text_i_care_about(div) && div.visible?
end
def text_i_care_about(div)
div.text =~ /regexp/
end
.visible? is in the unit tests, it's official, don't be scared of it :)
Alan
include? sees all text, not just visible text. See WTR-433 ticket for details.
There is Element#visible? method that is not officially supported (as far as I know).
What are you trying to do? If you have a lot of text on the page, and want to show only some of it, you could put the text in a few divs and then see if the div is visible.

Browser Context Menu customization?

Is there a way to override the "undo" and "select all" in right click context menu of the browser over textarea?
Thank you.
You cannot edit the browser's built-in context menu, but you can disable it and replace it with your own using the oncontextmenu event on the window object. I would caution that this is often a bad idea. Users expect to find the built-in context menu and are often frustrated when it isn't there.
I know you can prevent the whole context menu from opening by registering to the click() event, doing some cross-browser mumbo-jumbo to get wich button was clicked, and then return false if the right one was clicked.
However, I don't think it's possible to modify the context menu itself, at least not using javascript.
I should add that you may want to rethink why you're doing this. This will never be a protection against anything (some try to prevent copying images from their website), as it may simply be disabled by turning javascript off.
UPDATE: Ok, so you don't want to prevent users to do things, bug have them doing things your way. Then, I guess the best thing to do is :
Provide users with a toolbar that allow them to do these things (and thus making them use your actions instead of the default one
Map the usual keyboard shortcuts to your actions (Ctrl+A, Ctrl+Z, etc...)
Replace the right click menu with your own.
You mentionned in another comment that you cannot reproduce copy/paste, which is correct, but you can implement you own clipboard (that will only work for your webapp) if you really have to.

Resources