On one of the website I faced with such code in the HTML in script tag:
if (debug = "localhost" === window.location.hostname,!debug) {
var element = new Image
, devtoolsOpen = !1;
element.__defineGetter__("id", function() {
devtoolsOpen = !0
}),
setInterval(function() {
devtoolsOpen = !1,
console.log(element),
devtoolsOpen && window.document.write("")
}, 1e3)
}
So when I open Chrome DevTools the whole HTML is deleting and the page becomes empty. Can you help, how to prevent it?
Related
I am using primefaces documentViewer which is based on mozilla PDF.js: 2.11.338
https://www.primefaces.org/showcase-ext/views/documentViewer.jsf
and I want to know How to detect when documentViewer finish loading all document pages ?
The requirement is to show loading bar until all the document pages finish loading.
I tried this :
document.addEventListener('textlayerrendered', function (e) {
if (e.detail.pageNumber === PDFViewerApplication.page) {
// finished rendering
}
}, true);
and it's not working.
I was able to make it work as follows :
window.onload = function(){
PF('statusDialog').show();
var checkExist = setInterval(function() {
var iframe=document.getElementsByTagName('iframe')[0];
var innerDoc = iframe.contentDocument || iframe.contentWindow.document;
var viewer = innerDoc.getElementById('viewer');
var innerHTML = viewer.innerHTML;
if(innerHTML != null && innerHTML!='' && innerHTML!='undefined'){
clearInterval(checkExist);
PF('statusDialog').hide();
}
}, 1000);
}
After extensive searching I discovered Rob's answer: https://stackoverflow.com/a/11614440/7907844 that "webstore cannot be scripted by extensions".
I only want to extract the URL and pass it to the extension. Is there no way to achieve this?
Could I query all opened tabs from background script, and keep the active tab URL in a variable accessible to extension?
I ended up implementing background script that saves currently active tab URL in a variable that I access from within a popup.js because webstore doesn't allow us to run content scripts there. chrome.extension.getBackgroundPage() inside popup.js only worked when I used var currentUrl.
var currentUrl;
var activeTabId;
chrome.tabs.onUpdated.addListener(
function (tabId, changeInfo, tab) {
if (changeInfo.status === "complete") {
chrome.tabs.query({ active: true, currentWindow: true }, function (tabs) {
let activeTab = tabs[0];
currentUrl = activeTab.url;
activeTabId = activeTab.id;
if(currentUrl.includes("chrome.google.com/webstore/detail")) {
chrome.pageAction.show(activeTab.id);
} else {
chrome.pageAction.hide(activeTab.id);
}
console.log("page loaded: ", currentUrl);
});
}
});
chrome.tabs.onActivated.addListener(function (object) {
activeTabId = object.tabId;
chrome.tabs.get(activeTabId, function(tab){
currentUrl = tab.url;
if(tab.url.includes("chrome.google.com/webstore/detail")) {
chrome.pageAction.show(object.tabId);
} else {
chrome.pageAction.hide(object.tabId);
}
console.log("loaded tab selected: ", tab.url);
})
});
I have a main folder with index.html file for my html app. I have written a code in index.html of main folder to access the file (index.html) present in the sub folder as follows,
SubFile
When i click on the above link, it is not navigating to the subfile and instead the link of main folder index.html file changes to mainfolder/index.html#!/subfolder/index.html
I even tried changing the name of subfolder file but no success. What could be the problem?
I also want to navigate back to the main folder index.html from subfolder as follow,
Mainfile
But it is also not working. How can I achieve this as well?
Edited:
The file my-app.js is creating the issue. The code of my-app.js is as follows,
// Initialize your app
var myApp = new Framework7({
animateNavBackIcon: true,
// Enable templates auto precompilation
precompileTemplates: true,
// Enabled pages rendering using Template7
swipeBackPage: false,
swipeBackPageThreshold: 1,
swipePanel: "left",
swipePanelCloseOpposite: true,
pushState: true,
pushStateRoot: undefined,
pushStateNoAnimation: false,
pushStateSeparator: '#!/',
template7Pages: true
});
// Export selectors engine
var $$ = Dom7;
// Add main View
var mainView = myApp.addView('.view-main', {
// Enable dynamic Navbar
dynamicNavbar: false
});
$$(document).on('pageInit', function (e) {
$(".swipebox").swipebox();
$("#ContactForm").validate({
submitHandler: function(form) {
ajaxContact(form);
return false;
}
});
$('a.backbutton').click(function(){
parent.history.back();
return false;
});
$(".posts li").hide();
size_li = $(".posts li").size();
x=4;
$('.posts li:lt('+x+')').show();
$('#loadMore').click(function () {
x= (x+1 <= size_li) ? x+1 : size_li;
$('.posts li:lt('+x+')').show();
if(x == size_li){
$('#loadMore').hide();
$('#showLess').show();
}
});
$("a.switcher").bind("click", function(e){
e.preventDefault();
var theid = $(this).attr("id");
var theproducts = $("ul#photoslist");
var classNames = $(this).attr('class').split(' ');
if($(this).hasClass("active")) {
// if currently clicked button has the active class
// then we do nothing!
return false;
} else {
// otherwise we are clicking on the inactive button
// and in the process of switching views!
if(theid == "view13") {
$(this).addClass("active");
$("#view11").removeClass("active");
$("#view11").children("img").attr("src","images/switch_11.png");
$("#view12").removeClass("active");
$("#view12").children("img").attr("src","images/switch_12.png");
var theimg = $(this).children("img");
theimg.attr("src","images/switch_13_active.png");
// remove the list class and change to grid
theproducts.removeClass("photo_gallery_11");
theproducts.removeClass("photo_gallery_12");
theproducts.addClass("photo_gallery_13");
}
else if(theid == "view12") {
$(this).addClass("active");
$("#view11").removeClass("active");
$("#view11").children("img").attr("src","images/switch_11.png");
$("#view13").removeClass("active");
$("#view13").children("img").attr("src","images/switch_13.png");
var theimg = $(this).children("img");
theimg.attr("src","images/switch_12_active.png");
// remove the list class and change to grid
theproducts.removeClass("photo_gallery_11");
theproducts.removeClass("photo_gallery_13");
theproducts.addClass("photo_gallery_12");
}
else if(theid == "view11") {
$("#view12").removeClass("active");
$("#view12").children("img").attr("src","images/switch_12.png");
$("#view13").removeClass("active");
$("#view13").children("img").attr("src","images/switch_13.png");
var theimg = $(this).children("img");
theimg.attr("src","images/switch_11_active.png");
// remove the list class and change to grid
theproducts.removeClass("photo_gallery_12");
theproducts.removeClass("photo_gallery_13");
theproducts.addClass("photo_gallery_11");
}
}
});
document.addEventListener('touchmove', function(event) {
if(event.target.parentNode.className.indexOf('navbarpages') != -1 || event.target.className.indexOf('navbarpages') != -1 ) {
event.preventDefault(); }
}, false);
// Add ScrollFix
var scrollingContent = document.getElementById("pages_maincontent");
new ScrollFix(scrollingContent);
var ScrollFix = function(elem) {
// Variables to track inputs
var startY = startTopScroll = deltaY = undefined,
elem = elem || elem.querySelector(elem);
// If there is no element, then do nothing
if(!elem)
return;
// Handle the start of interactions
elem.addEventListener('touchstart', function(event){
startY = event.touches[0].pageY;
startTopScroll = elem.scrollTop;
if(startTopScroll <= 0)
elem.scrollTop = 1;
if(startTopScroll + elem.offsetHeight >= elem.scrollHeight)
elem.scrollTop = elem.scrollHeight - elem.offsetHeight - 1;
}, false);
};
})
What shall i remove from it to solve my problem?
#!/subfolder/index.html
This make me feel that you are using a single page application framework/library, like Angular or something related. So maybe your problem is not in the html but in your javascript code.
Please remove all javascript and check it will work fine then revert all js one by one and test you will find the conflict javascript resolve that conflict. it will work fine.
I have the following sample.js for Google Chrome extension and I would like to know if there is a way that make it able to open url in the same tab every time:
function getword(info,tab) {
chrome.tabs.create({
url: "http://translate.google.com/#en/ar/" + info.selectionText,
})
}
chrome.contextMenus.create({
title: "Translate: %s",
contexts:["selection"],
onclick: getword,
});
The extension send the selected text on the page to be translated on Google translate and I want every time the user uses it to open in the same Window's tab.
Us a variable to track if you have created a tab and once you have use chrome.tabs.update to update it instead of opening a new one. I think users will find this experience confusing though since sometimes a new tab is opened and sometimes there isn't. You will also have to handle the error situation if the users has closed the tab you are trying to update.
var tabId = false;
if (tabId === false) {
chrome.tabs.create({
url: "http://translate.google.com/#en/ar/" + info.selectionText,
}, function(tab) {
tabId = tab.id;
});
} else {
chrome.tabs.update(tabId, {
url: "http://translate.google.com/#en/ar/" + info.selectionText,
});
}
I had a similar requirement to avoid opening multiple tabs for the same URL. I also employed tabs.query to check if a tab with the URL property matching the new tab was already open. If so then I inform the user via a msg box with a 'yes' or 'no' button asking if he wants to open a new tab or over-write the current matching tab. If 'yes' then I tabs.update the already open tab with the url of the newly created tab and close the new tab. It is a bit cluggy but seems to work. I initially found the tabs.query function confusing but eventually have grown to like it.
In the code below I am doing something slightly different. I want to know if the browser has open a tab with the title of 'Agent Home'. If yes then I update that tab after retrieving its tab.id with the tab.url of the newly created tab. In a different scenario, I check if a tab containing "PAMM v4.0" in its title is open. If so I pop a message box then either close the newly created tab. I am in the process of opening the new tab but making it tabs.inactive.
chrome.tabs.onCreated.addListener(function funcName (tabs) {
var tabID = 0;
var tabURL = "";
var tabTitle = "";
var length = 0;
var HomeOrV4 = "";
chrome.tabs.query({}, function(T){
length = T.length;
if(length >0){
for(var i = 0; i<T.length; i++){
tabTitle = T[i].title;
tabID = T[i].id;
tabURL = T[i].url;
if(tabTitle == "PAMM - Agent Home"){
HomeOrV4 = "Home";
return;
}
if(tabTitle == "PAMM v4.0"){
HomeOrV4 = "V4";
return;
}
}
}
});
});
chrome.tabs.onUpdated.addListener(function(id, status){
var V4tabID = 0;
var V4TabURL = "";
var AHPtabID = 0;
if(status.status == "complete"){
console.log("Tab loaded ");
chrome.tabs.query({title:"PAMM - Agent Home Page"}, function(Tabs){
if(Tabs.length>1){
Tabs.remove(Tabs[0].id);
}
if(Tabs.length = 1){
AHPtabID = Tabs[0].id;
//chrome.tabs.remove(V4tabID );
}
});
chrome.tabs.query({title:"PAMM v4.0"}, function(Tabs){
if(Tabs.length > 1){
var r = confirm("You need to complete the open Guest Card. Press OK to continue ...")
if(r==true){
chrome.tabs.update(Tabs[Tabs.length-1].id,{active:false});
//chrome.tabs.remove(Tabs[Tabs.length-1].id);
chrome.tabs.update(Tabs[0].id,{selected:true});
}
}
if(Tabs.length == 1){
tabID = Tabs[0].id;
if (AHPtabID >0){
chrome.tabs.remove(AHPtabID);
}
V4TabURL = Tabs[0].url; }
});
}
else{
console.log("Tab loading");
}
});
In addition to above answers, you need to add permission to access tabs in the manifest file, in case you want to access url, title, or favIconUrl properties of tabs.
"permissions": ["contextMenus", "tabs"],
I'm leveraging Google Chrome's omnibox API in my extension.
Current users, including myself, have noticed that the omnibox ceases responding entirely after an undetermined state change or a period of time lapsing. Typing the word to trigger entering into "omnibox" stops having any effect and the URL bar does not shift into omnibox mode.
Restarting Google Chrome does not fix the issue, but restarting my plugin by unchecking and then re-checking the 'enabled' checkbox on chrome://extensions does resolve the issue.
Does anyone have any suggestions on what to investigate? Below is the code used. It is only loaded once through my permanently persisted background page:
// Displays streamus search suggestions and allows instant playing in the stream
define([
'background/collection/streamItems',
'background/model/video',
'common/model/youTubeV2API',
'common/model/utility'
], function (StreamItems, Video, YouTubeV2API, Utility) {
'use strict';
console.log("Omnibox LOADED", chrome.omnibox);
var Omnibox = Backbone.Model.extend({
defaults: function () {
return {
suggestedVideos: [],
searchJqXhr: null
};
},
initialize: function () {
console.log("Omnibox INITIALIZED");
var self = this;
chrome.omnibox.setDefaultSuggestion({
// TODO: i18n
description: 'Press enter to play.'
});
// User has started a keyword input session by typing the extension's keyword. This is guaranteed to be sent exactly once per input session, and before any onInputChanged events.
chrome.omnibox.onInputChanged.addListener(function (text, suggest) {
// Clear suggested videos
self.get('suggestedVideos').length = 0;
var trimmedSearchText = $.trim(text);
// Clear suggestions if there is no text.
if (trimmedSearchText === '') {
suggest();
} else {
// Do not display results if searchText was modified while searching, abort old request.
var previousSearchJqXhr = self.get('searchJqXhr');
if (previousSearchJqXhr) {
previousSearchJqXhr.abort();
self.set('searchJqXhr', null);
}
var searchJqXhr = YouTubeV2API.search({
text: trimmedSearchText,
// Omnibox can only show 6 results
maxResults: 6,
success: function(videoInformationList) {
self.set('searchJqXhr', null);
var suggestions = self.buildSuggestions(videoInformationList, trimmedSearchText);
suggest(suggestions);
}
});
self.set('searchJqXhr', searchJqXhr);
}
});
chrome.omnibox.onInputEntered.addListener(function (text) {
// Find the cached video data by url
var pickedVideo = _.find(self.get('suggestedVideos'), function(suggestedVideo) {
return suggestedVideo.get('url') === text;
});
// If the user doesn't make a selection (commonly when typing and then just hitting enter on their query)
// take the best suggestion related to their text.
if (pickedVideo === undefined) {
pickedVideo = self.get('suggestedVideos')[0];
}
StreamItems.addByVideo(pickedVideo, true);
});
},
buildSuggestions: function(videoInformationList, text) {
var self = this;
var suggestions = _.map(videoInformationList, function (videoInformation) {
var video = new Video({
videoInformation: videoInformation
});
self.get('suggestedVideos').push(video);
var safeTitle = _.escape(video.get('title'));
var textStyleRegExp = new RegExp(Utility.escapeRegExp(text), "i");
var styledTitle = safeTitle.replace(textStyleRegExp, '<match>$&</match>');
var description = '<dim>' + video.get('prettyDuration') + "</dim> " + styledTitle;
return {
content: video.get('url'),
description: description
};
});
return suggestions;
}
});
return new Omnibox();
});
As far as I'm aware the code itself is fine and wouldn't have any effect on whether I see omnibox or not.
You can find full source code here: https://github.com/MeoMix/StreamusChromeExtension/blob/master/src/js/background/model/omnibox.js