Selecting Browser Action for Current Tab in Chrome Extension - google-chrome-extension

I'm working on a chrome extension that manipulates certain cookies. Most of the manipulation takes place in the background service, but I need to update the icon and pass data to the browser action for the current tab.
I'm looking for an action similar to the AdBlock extension. AdBlock loads a small number in the bottom right of the icon for the number of ads blocked, so it varies from tab to tab.
When I perform this action from the background service, it seems to change across all browsing tabs. Can someone with experience in extensions point me in the right direction for this one?

This should get you started.
setInterval(function(){//every second
chrome.tabs.getSelected(null,function(tab) {//on the current tab,
chrome.browserAction.getBadgeText({tabId:tab.id}, function(badgeText){//get the tab's badge text
if(badgeText.length<1){
badgeText="0";//set the text if its empty
}
chrome.browserAction.setBadgeText({tabId:tab.id,text:badgeText/1+1+""});//and add one.
});
});
},1000);
make sure you don't run this in the console, because chrome will get the developer tool window id, and since no valid tab has that id, it will change every single tab's badgeText.

You just need to include the tab id when you set it, such as:
chrome.browserAction.setBadgeText({ text: "5", tabId: tab.id })

Related

How to open a hyperlink in separate browser tab in Coded UI

I have three different Hyperlinks on a web page
Planning.
Solutions.
Contact Us.
I want to open them in separate browser tab one by one using codedUI.
i have written the above code to obtain the list of Hyperlink
HtmlControl Hyperlink = new HtmlControl(browser);
Hyperlink.SearchProperties.Add(HtmlControl.PropertyNames.ControlType,"Hyperlink");
UITestControlCollection controls = Hyperlink.FindMatchingControls();
foreach(UITestControl control in controls)
{
if (control is HtmlHyperlink)
{
HtmlHyperlink link = (HtmlHyperlink)control;
if(link.InnerText=="Planning"|| link.InnerText== "Solutions")
{
//separate Tab logic goes here
}
}
}
I need the help related to opening a hyperlink in new browser tab. Is it possible in CodedUI ?
By default if you click the mouse middle button (or click the scroll wheel), it opens a link in new tab. I would modify your code as below in this case,
if(link.InnerText=="Planning"|| link.InnerText== "Solutions")
{
//Open Link in New tab, by clicking middle button
Mouse.Click(link, MouseButtons.Middle);
}
You can do this a couple different ways. I would use #Prageeth-Saravan 's approach first to see if it works because it's easier and actually tests your UI. You could also:
Get the URL from the found link control
Send the "New tab" keyboard shortcut
Reinstantiate your browser window object to be sure it's pointing to the new tab
Navigate to that URL
The reason why I bolded step 3 is regardless of approach, if you intend to assert or interact with anything in a new tab you're going to have to remember that the CodedUI software will still be "Looking" at the old tab until you reinitialize it.

Safari Extension: Display a local HTML, instead of the default or blank page, when the user opens a new tab

I'm trying to port a simple Chrome extension to Safari extension. It should display a local HTML when the user opens a new tab, but the path to the file should not appear in the URL-bar.
The code for the Chrome Extension is:
manifest.json
{
...
"chrome_url_overrides": {
"newtab": "main.html"
},
"permissions": [
"tabs"
]
}
main.html
<html>
<head></head>
<body>
Hello World!
</body>
</html>
In Safari, the close I get is to create a button on the toolbar an redirect to an URL.
How can I achieve the same functionality? I've tried to find examples, with no luck.
This may not be possible to do reliably. You can detect when a new tab is opened using the open event that is fired on safari.application or on a SafariBrowserWindow object, but then you have to make sure the new tab is not going to have a page loaded into it right away. That you can do by listening for a beforeNavigate event on the new tab...but then there are complications.
If the tab remains truly blank, no beforeNavigate event will be fired right away, so you can use a timeout to stop listening for the event and then proceed with loading the page of your choice. But new tabs may not remain blank. They can show the Top Sites page (the default behavior), they can show the user-specified home page, or they can show the page that is loaded in the previous tab.
In the home-page and same-page cases, a beforeNavigate event will be fired on the new tab, and its url property's value will be the URL to be loaded. Whether or not to hijack these types of new tab and load your own page into them is up to you.
In the Top Sites case, a beforeNavigate event will be fired on the new tab, but its url property will be null. So you might think you can detect that and then load the page of your choice in the new tab. However, there is a problem, because this same behavior (a beforeNavigate event with a null url) happens when any extension opens one of its own pages in a new tab. Therefore, if you were to hijack all tabs with a null beforeNavigate URL, you would make it impossible for other extensions to open their own pages.

Chrome extension to search a website?

I'm trying to create a google chrome extension (I'm almost a newb at programming, although I understand the basics, somewhat) that will search a video streaming site for the title that you enter. The site is somewhat slow, and going through a page or two to get to the sites' search bar can be a pain. I would (for now) like this extension to tie into the sites' existing search url. Here is part of the URL. When you leave the search field blank and search, this is the resulting URL
anisrch_title=&op=srch&anisrch_cat=
When you actually search for something, it simply inserts the search term as follows:
anisrch_title=(SEARCH TERM HERE WITHOUT PARENTHESES)&op=srch&anisrch_cat=
As I mentioned before, I am a programming newbie, and am unfamiliar with all sorts of programming techniques. How would I go about making an extension that redirects you to the URL + the search term inserted into the appropriate place?
For example, upon clicking the extension Icon, a pop-up appears with a text field and a "Go" button.
Textfield input = SearchTitle
And upon clicking the "Go" button, the extension redirects you to the full link of:
anisrch_title=(SearchTitle)&op=srch&anisrch_cat=
Please be patient with me, as I am a newbie at coding and I am still learning. The site I am making this for is strained by heavy load, and insufficient server resources. Could someone please walk me through this?
For example, upon clicking the extension Icon, a pop-up appears with a
text field and a "Go" button. Textfield input = SearchTitle
Use a browser action (https://developer.chrome.com/trunk/extensions/browserAction.html). The popup of a browser action can be a html page. Just put your text field, go button, etc in popup.html.
And upon clicking the "Go" button, the extension redirects you to the
full link of: anisrch_title=(SearchTitle)&op=srch&anisrch_cat=
redirect? Did you mean opening the search page in the current tab? If that is the case, use chrome.tabs.update (https://developer.chrome.com/extensions/tabs.html#method-update) in your handler of onclick for the button (say your button id is go and text field id is query). Because of CSP (https://developer.chrome.com/trunk/extensions/contentSecurityPolicy.html), you must place your JavaScript code in a separate popup.js and refer to it in your popup.html.
document.getElementById('go').addEventListener('click', function() {
chrome.tabs.update({url: 'http://yoursite.com/path?anisrch_title=' + document.getElementById('query')'&op=srch&anisrch_cat='});
});
If you prefer opening a new tab, use chrome.tabs.create instead.
If you're not familiar with basics of Chrome extensions, the Getting Started tutorial will help you much: https://developer.chrome.com/extensions/getstarted.html.

Why does a browser action's default icon reapper after a custom icon was applied?

I have a strange problem with a browser action icon in Chrome. There is a default icon for browser action defined in manifest. The icon is displayed correctly. Then in a background page, under some conditions, I call:
chrome.browserAction.setIcon({path:"green_32.png", tabId:request.tabId});
This icon blinks for a moment, and then changes back to the default icon. The active tab and its id passed to setIcon remain the same during all the process.
Can someone suggest an idea why this can happen?
The reason why the icon was reset to default state every time is because I called setIcon before the tab finishes loading and obtains "complete" state.
I guess there should be some information about this in documentation on tabs or on browser actions, but I didn't find it: the default icon is actually applied - by-design - to a specific page after it finishes loading. I moved the call setIcon into tabs.onUpdated handler, and now custom icon persists.
This contradicts to my former understanding that the browser action icon is set on a per tab basis, regarless to a page loaded into the tab and its state.
#KonradDzwinel kindly provided a simple extension to test the case (look at the comments). I changed its background.js script to demonstrate this behaviour:
chrome.browserAction.onClicked.addListener(function(tab)
{
chrome.browserAction.setIcon({path: 'gfx/icon2.png', tabId: tab.id});
});
To reproduce this behaviour, on any tab press the browser action icon to get it changed. Then refresh the page. As a result the browser action icon reset back to default.
If this behaviour is explained in some documentation, please, write this in comments, and I'll update the answer. From what I have read so far, I was convinced that default icon is set for new tab at its creation time, and then any changes to it are solely under extension's control.

Trouble attaching to a javascript window with Watir

I am new to Watir, and am working on developing a testing tool for my work.
I have run into a problem that I cannot seem to solve, even after checking several sites.
The javascript window creation is below: (the window created holds a pdf in a window, so the only "buttons" are the minimize, maximize, close)
<a id="LogIn_HyperLink2" class="ms-WPTitle" onclick="javascript:var win = new Window({className: 'spread', title: 'Security Statement', top:0, left:1, width:750, height:365, url:'--redacted--/security.pdf', showEffectOptions: {duration:1.0}}); win.setConstraint(true, {left:10, right:20}); win.showCenter(); return false;" href="--redacted--/security.pdf" style="color:#6699cc; font-weight:bold;">Security Statement</a><br>
I have tried using both
puts browser.modal_dialog(:title, "Security Statement").exists?
puts browser.javascript_dialog.exists?
both have returned 'false'
What approach should I be taking to attach to this new window, or more directly: How can I close this new window?
You can see the page at this link (IE only)
If the window holds a PDF file it's a browser window, not a modal javascript popup (alert, confirm, prompt)
It's defined to start without all the normal menus etc active, but it's still a browser window. You can attach to it as described in the Watir Wiki section about new browser windows, using the url or the title since you know both of those (given the HTML you showed us).
If you are using Watir-Webdriver use it's window switching commands. Right now the watirspec for that is your best reference to the methods supported and how they work.
EDIT
Thanks for the link. While the above would be true for a new browser window, that's not what you are faced with. What you have there is all inside the browser HTML, created in the DOM on the fly with javascript. It's all standard HTML elements, easily interacted with once you know what's going on (this is actually IMHO easier to deal with than a popup or separate window)
Use the IE developer tools, after you click the link that makes that 'window' appear, click the icon in the toolbar of the dev tools to refresh the DOM in the dev tools and you will be able to see that.
The outermost container appears to be a div of class 'dialog', which is unique in the DOM at that point.
The window controls are three divs under that one, with classes 'spread_close', 'spread_minimize', 'spread_maximize'. There are three tables that hold the graphic elements for the top, sides, and bottom of the 'window' but there is ZERO actual content there, it's just a visual windowframe.
There is also an iframe that superimposes that window, which is I think were the content would be (I can't get it to load, maybe because I'm not authorized for it or something)
If you just want to close the window, try this:
browser.div(:class => 'spread_close').click
Since this is coming into existing due to a bunch of client side JS code you may need to use something like the 'when_present' method after clicking the link before you first start to interact with it. eg if all you want to do is click the link to open it, and then close it, you'd do something like this
browser.link(:text => 'Security Statement').click
browser.div(:class => 'spread_close').when_present.click

Resources