I have a windows application in c# in which i am getting the Html of the page opened in chrome through a chrome extension
this is how i wrote a chrome extension
background.js
chrome.tabs.onUpdated.addListener(function (tabId, changeInfo, tab) {
if (changeInfo.status === 'complete') {
chrome.tabs.executeScript(tabId, { file: "jquery.min.js" }, function () {
chrome.tabs.executeScript(tabId, { file: "content.js" }, function () {
chrome.tabs.sendMessage(tabId, { text: tab }, function (data) {
alert("hi");
chrome.tabs.getAllInWindow(data.WindowId, function (response) {
for (var i = 0; i < response.length; i++) {
if ((response[i].index + 1) == data.Tab) {
chrome.tabs.update(response[i].id, { selected: true });
}
}
});
});
});
});
}
});
Content.js
chrome.runtime.onMessage.addListener(function (msg, sender, sendResponse) {
$.post(listener, { dom: document.all[0].outerHTML }, function (data) {
});
});
Now I need to have a button in by winform to send some data to chrome. Please help.
Got It, We can use native messaging app to interact with chrome through native app messaging
https://developer.chrome.com/extensions/messaging#native-messaging
Related
I'm using extjs6 to developing something, some of scripts is async loaded after I click a button to add a tab to tab panel, this scripts did not include in the build directory when I build my app via sencha app build. What way is right when build the application at this situation?
any help, thanks.
Depending if the scripts should be dynamic i would use the Ext.loader functionalities.
If not, simply include them in your index.html.
The dynamic way could look like this:
Ext.define('muzkatMap.Module', {
singleton: true,
loadAssets: function () {
return this.loadMapScripts();
},
filesLoaded: false,
scriptPaths: [
'https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.3.1/leaflet.css',
'https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.3.1/leaflet.js',
'https://cdnjs.cloudflare.com/ajax/libs/leaflet-providers/1.1.17/leaflet-providers.js'
],
loadMapScripts: function () {
var loadingArray = [], me = this;
return new Ext.Promise(function (resolve, reject) {
Ext.Array.each(me.scriptPaths, function (url) {
loadingArray.push(me.loadMapScript(url));
});
Ext.Promise.all(loadingArray).then(function (success) {
console.log('artefacts were loaded successfully');
resolve('Loading was successful');
},
function (error) {
reject('Error during artefact loading...');
});
});
},
loadMapScript: function (url) {
return new Ext.Promise(function (resolve, reject) {
Ext.Loader.loadScript({
url: url,
onLoad: function () {
console.log(url + ' was loaded successfully');
resolve();
},
onError: function (error) {
reject('Loading was not successful for: ' + url);
}
});
});
}
});
And you simply call in you code:
muzkatMap.Module.loadAssets().then(function(){
// do something with the newly available components
})
After calling this function I am getting the following error:
"TypeError: Cannot read property 'pickContact' of undefined"
$scope.pickContact = function() {
navigator.contacts.pickContact(function(contact) {
if(contact) {
$scope.requestData.guestName = contact.displayName;
if(contact.phoneNumbers && contact.phoneNumbers.length > 0) {
$scope.requestData.phoneNo = contact.phoneNumbers[0].value;
} else {
$scope.requestData.phoneNo = null;
}
$scope.$apply();
} else {
$ionicPopup.alert({
title: 'Error!',
template: 'Unable to get contact details'
});
}
}, function(err) {
console.log('Error: ' + err);
$ionicPopup.alert({
title: 'Error!',
template: 'Unable to get contact details'
});
});
};
Use the $cordovaContacts plugin for get contacts and inject the dependency in your controller.
This plugin is available only on devices, not in the browser please do test on device.
For this plugin first you need to install ngCordova, this will support you for many more plugins and implementations.
Install plugin using following command,
cordova plugin add cordova-plugin-contacts
Example :
.controller('MyCtrl', function($scope, $cordovaContacts, $ionicPlatform) {
$scope.addContact = function() {
$cordovaContacts.save($scope.contactForm).then(function(result) {
// Contact saved
}, function(err) {
// Contact error
});
};
$scope.getAllContacts = function() {
$cordovaContacts.find().then(function(allContacts) { //omitting parameter to .find() causes all contacts to be returned
$scope.contacts = allContacts;
}
};
$scope.findContactsBySearchTerm = function (searchTerm) {
var opts = { //search options
filter : searchTerm, // 'Bob'
multiple: true, // Yes, return any contact that matches criteria
fields: [ 'displayName', 'name' ] // These are the fields to search for 'bob'.
desiredFields: [id]; //return fields.
};
if ($ionicPlatform.isAndroid()) {
opts.hasPhoneNumber = true; //hasPhoneNumber only works for android.
};
$cordovaContacts.find(opts).then(function (contactsFound) {
$scope.contacts = contactsFound;
};
}
$scope.pickContactUsingNativeUI = function () {
$cordovaContacts.pickContact().then(function (contactPicked) {
$scope.contact = contactPicked;
}
}
});
Hope this will help you !!
I have an angular js function which should be called for every 2 seconds only when the current tab is open in the browser. Is there any way to check whether the current page is active in the browser.
$scope.callAtInterval = function() {
var url = "http://127.0.0.1/test";
$http.get(url).success( function(response) {
$scope.initial = response;
},
function errorCallback(response) {
$scope.result=response;
});
}
$interval( function(){ $scope.callAtInterval(); }, 5000);
}
I think below piece of code is self-explanatory
import { HostListener} from "#angular/core";
#HostListener("window:visibilitychange", ["$event"])
onVisibilityChange($event) {
const isVisible = $event.target.visibilityState === 'visible';
this.logger.info(isVisible);
if (isVisible) {
// tab is visible
} else {
// tab is not-visible
}
}
You would use the focus and blur events of the window:
$(window).on("blur focus", function(e) {
var prevType = $(this).data("prevType");
if (prevType != e.type) { // reduce double fire issues
switch (e.type) {
case "blur":
// cancel your interval function
break;
case "focus":
// emit your interval function
break;
}
}
$(this).data("prevType", e.type);
})
I have simple test doing login and trying to check if it's success:
describe('My Angular App', function () {
describe('visiting the main homepage', function () {
beforeEach(function () {
browser.get('/');
element(By.id("siteLogin")).click();
});
it('should login successfully', function() {
element(By.name("login_username")).sendKeys("test#email.com");
element(By.name("login_password")).sendKeys("testpass");
element(By.id("formLoginButton")).click().then(function() {
browser.getCurrentUrl().then(function(url){
expect(url).toContain("profile");
});
});
});
});
});
It goes well until that last part where I'm checking URL, and in Selenium Server I get:
INFO - Executing: [execute async script: try { return (function (rootSelector, callback) {
var el = document.querySelector(rootSelector);
try {
if (window.getAngularTestability) {
window.getAngularTestability(el).whenStable(callback);
return;
}
if (!window.angular) {
throw new Error('angular could not be found on the window');
}
if (angular.getTestability) {
angular.getTestability(el).whenStable(callback);
} else {
if (!angular.element(el).injector()) {
throw new Error('root element (' + rootSelector + ') has no injector.' +
' this may mean it is not inside ng-app.');
}
angular.element(el).injector().get('$browser').
notifyWhenNoOutstandingRequests(callback);
}
} catch (err) {
callback(err.message);
}
}).apply(this, arguments); }
catch(e) { throw (e instanceof Error) ? e : new Error(e); }, [body]])
and also I get:
Failures:
1) My Angular App visiting the main homepage should login successfully
Message:
Error: Timeout - Async callback was not invoked within timeout specified by jasmine.DEFAULT_TIMEOUT_INTERVAL.
My protractor-conf.js:
exports.config = {
seleniumAddress: 'http://localhost:4444/wd/hub',
baseUrl: 'http://localhost:8080/Mysite',
capabilities: {
'browserName': 'firefox' // muste use firefox because I can't get .click() to work in Chrome
},
specs: [
'spec-e2e/*.js'
],
framework: 'jasmine2',
jasmineNodeOpts: {
isVerbose: true,
showColors: true,
defaultTimeoutInterval: 30000
}
};
I appreciate any help on this one.
Thanks
Looks like there is a non-Angular page opened after a click. If this is the case, you need to turn the synchronization between Protractor and Angular off:
afterEach(function () {
browser.ignoreSynchronization = false;
});
it('should login successfully', function() {
element(By.name("login_username")).sendKeys("test#email.com");
element(By.name("login_password")).sendKeys("testpass");
browser.ignoreSynchronization = true;
element(By.id("formLoginButton")).click().then(function() {
expect(browser.getCurrentUrl()).toContain("profile");
});
});
Note that you don't need to explicitly resolve the promise returned by getCurrentUrl and can let the expect() do that for you implicitly.
You may also need to wait for the URL to change:
var urlChanged = function(desiredUrl) {
return browser.getCurrentUrl().then(function(url) {
return url == desiredUrl;
});
};
browser.wait(urlChanged("my desired url"), 5000);
i have a problem,
i would like to disable the parallax effect on my website when he is on a mobile device, so i looked on different forum, and i found this code :
var isMobile = {
Android: function() {
return navigator.userAgent.match(/Android/i);
},
BlackBerry: function() {
return navigator.userAgent.match(/BlackBerry/i);
},
iOS: function() {
return navigator.userAgent.match(/iPhone|iPad|iPod/i);
},
Opera: function() {
return navigator.userAgent.match(/Opera Mini/i);
},
Windows: function() {
return navigator.userAgent.match(/IEMobile/i);
},
any: function() {
return (isMobile.Android() || isMobile.BlackBerry() || isMobile.iOS() || isMobile.Opera() || isMobile.Windows());
}
};
jQuery(document).ready(function(){
if( !isMobile.any()){
$(window).stellar();
}
});
But that didn't work, there is no way to disable stellar with a simple code ?
(i find a another code to detecte the device)
if(jQuery.browser.mobile)
{
console.log('You are using a mobile device!');
}
else
{
console.log('You are not using a mobile device!');
}
this one works (with the .js).
But i still dont know how to disable stellar.
Thanks guys
Following your first example change the last part with this:
if( !isMobile.any() )
$(function(){
$.stellar({
horizontalScrolling: false,
verticalOffset: 50
});
});
For me it worked well, the statement says: "If NOT mobile then initialize Stellar".
Note that the list of mobile agents you provided is not complete, it's for the majority of devices tho, but keep that in mind!
this code worked for me;
var isMobile = {
Android: function() {
return navigator.userAgent.match(/Android/i);
},
BlackBerry: function() {
return navigator.userAgent.match(/BlackBerry/i);
},
iOS: function() {
return navigator.userAgent.match(/iPhone|iPad|iPod/i);
},
Opera: function() {
return navigator.userAgent.match(/Opera Mini/i);
},
Windows: function() {
return navigator.userAgent.match(/IEMobile/i);
},
any: function() {
return (isMobile.Android() || isMobile.BlackBerry() || isMobile.iOS() || isMobile.Opera() || isMobile.Windows());
}
};
jQuery(document).ready(function(){
jQuery(window).stellar({
horizontalScrolling: false,
hideDistantElements: true,
verticalScrolling: !isMobile.any(),
scrollProperty: 'scroll',
responsive: true
});
});