I was looking for a way to detect the browser extension I am building from my website and I need to alert my users in-case they are viewing my site without it. I have been able to do this in firefox, but I want to know is there a way I can do this in Google Chrome? Even if there is a hack to get this going I am fine.
Sure. Create a content script specific to you site in the extension, and make it add an invisible marker in the DOM, eg:
$('body').append('<div style="display: none;" class="extension_enabled" />');
In the page, set a short timeout to check for this after the document is fully loaded, eg:
$(function() {
setTimeout(function() {
if ($('.extension_enabled').length > 0) {
alert('Installed!');
} else {
alert('Not installed.');
}
}, 500);
});
NOTE: Code in jQuery format for simplicity. You can do it with raw javascript, of course.
The official Google Chrome Extensions Developers' Guide has an item covering exactly this.
Related
I am using Aplication Customizer to add jQuery and custom javascript to my page:
let current_date: Date = new Date();
let date_String: string = current_date.toString();
date_String = current_date.toISOString()
console.log('date_string = %s', date_String);
SPComponentLoader.loadCss('https://8lbg15.sharepoint.com/sites/KnowledgeBase/SiteAssets/caj23.css?d=' + date_String);
//SPComponentLoader.loadScript('https://8lbg15.sharepoint.com/sites/KnowledgeBase/SiteAssets/jquery-3.6.3.min.js?d=' + date_String)
//SPComponentLoader.loadScript('https://8lbg15.sharepoint.com/sites/KnowledgeBase/SiteAssets/caj23.js?d=' + date_String);
SPComponentLoader.loadScript('https://8lbg15.sharepoint.com/sites/KnowledgeBase/SiteAssets/jquery-3.6.3.min.js?d=' + date_String, {
globalExportsName: 'jQuery'
}).then(($: any) => {
$(function () {
console.log('jQuery is loaded');
});
SPComponentLoader.loadScript('https://8lbg15.sharepoint.com/sites/KnowledgeBase/SiteAssets/caj23.js?d=' + date_String, {}).then(() => {
//...do something
});
});
The code runs fine when I open the page. However, if I navigate to the page from the main site navigation (ie the mega menu) the code doesn't run. Yet if I click on the link a second time in the nav, it loads the page and the code runs.
In other words, it doesn't rung when you change pages via the nav, but if you load the same page (or reload the page with F5) it does!!!
Is this some kind of caching issue? I am using Sharepoint Modern/Online so there is no caching setting for the site.
Any solutions gratefully received.
According to your description, as far as I know, custom code is usually loaded when the entire page is refreshed. And the first time you enter the page via the navigation, the entire page refresh is not triggered, so no code does not take effect.
SharePoint Online works online. If you are worried that the cache has affected this matter, you can try to clear the cache of the browser, or switch to the private mode to see if the problem is resolved.
Seems to be a routing interceptor that will check your link and if appropriate, do a partial navigation, ie avoiding a full page load.
To work around and force javascript to run, add
data-interception="off"
to all links eg by script
$('a').attr("data-interception", "off");
I'm trying to replace all favicons with a Chrome extension with some Javascript. In order to do that I need to find the dom element that contains the favicon.
On most websites I can do something similar to this:
document.querySelector('link[rel="icon"]').href = "//data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw=="
However on some websites such as apple.com, I can't figure out the dom element that contains the favicon by just viewing the page source, how would I go about blocking the favicon in that case?
I realized I was going about this all wrong. Instead of trying to replace the html element after the page was loaded, I should just block the network request which fetches the favicon.
chrome.webRequest.onBeforeRequest.addListener(
function(details) {
return {cancel: ["favicon.ico", "favicon"].includes(details.url.split('/').pop().split('?')[0].split('#')[0]) };
},
{urls: ["<all_urls>"]},
["blocking"]);
I am trying to create chrome extension that will scrap data from my webpage and then will display it in browser action window. I wanted to use background page for this, cause if i understand extensions correctly, it is only element capable of non-stop working, without need of visible tab.
The problem is, the script i wrote for background.js doesn't work properly, when i use background.js:
var location = window.location.href = 'http://localhost/index.php';
console.log(location);
manifest.json:
"background": {
"scripts": ["src/background/background.js"]
},
The answer i get is chrome-extension://some_random_text/_generated_background_page.html.
It is possible to use background pages to navigate to my webpage, then fill some forms and scrap data for later use?
This is an old question, but I recently wanted to do exactly the same.
So I'll provide an answer for others who are interested.
Setting window.location still does not work in Chrome52.
There is a workaround though. You can first fetch the web page with fetch(), and then use document.write to set the content.
This works fine, and you can then query the document and do everything you want with it.
Here is an example. (Note that I'm using the fetch API, arrow functions and LET, which all work fine now in Chrome52).
fetch("http://cnn.com").then((resp) => {
return resp.text();
}).then((html) => {
document.open("text/html");
document.write(html);
document.close();
// IMPORTANT: need to use setTimeout because chrome takes a little
// while to update the document.
setTimeout(function() {
let allLinks = document.querySelectorAll('a');
// Do something with the links.
}, 250);
});
A chrome extension has two main parts, the extension process and the browser itself. The Background Page works on the extension process. It does not have direct access and information about your webpages.
To have scripts working non-stop on your webpages, you will need to use Content Scripts.
You can then communicate between your Content Script and your Background Page using messages
contentScript.js
var location = window.location.href = 'http://localhost/index.php';
chrome.runtime.sendMessage({location: location}, function(response) {});
background.js
chrome.runtime.onMessage.addListener(
function(request, sender, sendResponse) {
console.log(request.location);
});
On the page
https://connect.wels.net/AOM/schools/Pages/default.aspx
the scroll bars don't work (disabled) in Chrome. They are fine in other browsers. I would love to solve this. Sometimes it works in Chrome. Sometimes zooming in and out fixes it. Other times, it doesn't help.
This is answered at this site:
http://withinsharepoint.com/archives/256
The cause is in fact a timing issue around execution of a specific bit of very important onload JavaScript.
The bit that doesn’t execute (and causes a systemic issue, one of the issues it causes is the scrolling weirdness), is:
body onload="if(typeof(_spBodyOnLoadWrapper) != 'undefined'; _spBodyOnLoadWrapper();"
What this line means is basically if the page has loaded the onloadwrapper function from init.js. This onloadwrapper does a bunch of things, such as loading the ECMAScript for support SP.JS, executes page JavaScript for any onload events, and any client interactivity. So basically when this doesn’t execute pretty much no client side code from SharePoint can or will work, or any script that you have that relies on any of it. Scrolling is just the tip of the ice berg. Now for the good news, it’s easy to fix (I have a case in with Microsoft to look at including the fix in a future cumulative update).
Here's the fix that worked for me. Put this at the head of your master page. This will fix Chrome and Safari and also help your _spBodyOnLoadFunctionNames functions work.
https://gist.github.com/alirobe/4224245
via http://withinsharepoint.com/archives/256
if (jQuery.browser.webkit) {
jQuery(document).ready(function () {
var interval;
function loopCheck() {
if (typeof (_spBodyOnLoadWrapper) !== "undefined" && _spBodyOnLoadCalled == false)
_spBodyOnLoadWrapper();
else
window.clearInterval(interval);
}
// Give SP a chance..
setTimeout(function () { interval = window.setInterval(loopCheck, 30); }, 120);
});
}
That is the common problem with Chrome Browser in Sharepoint, as Sharepoint is supporting Limited Functionality to the Chrome Browser.
It also happens with the Javascript Loading order in Sharepoint page.
I cant find any solution for this till date
Refer this : https://answers.uchicago.edu/page.php?id=24860
I'm building my first Facebook Connect application, and am running into an odd problem. This example code:
<script type="text/javascript" charset="utf-8">
FB.init("{{ FACEBOOK_API_KEY }}", "{% url xd_receiver %}");
FB.ensureInit(function() {
var invite_dialog;
function showInviteDialog() {
invite_dialog = new Dialog(Dialog.DIALOG_POP).showMessage('Share with Friends', invite_friends_selector, null, null);
}
function hideInviteDialog() {
invite_dialog.hide();
}
showInviteDialog();
});
</script>
keeps throwing the error:
Dialog is not defined
Is Dialog available in Facebook connect/XFBML applications? Do I need to do anything special in order to use it?
Thanks in advance!
The Dialog you're trying to use is a construct of Facebook Javascript. Unfortunately, FBJS is only available within the Facebook domain inside an FBML page.
The plus side (and it's a big plus) is that if you're using Facebook Connect, you're either inside an iframe or on your own site. You can use real Javascript instead of the limited, watered-down FBJS, including things like MooTools/Jquery/Prototype, or any external JS you desire. You can make your own dialogs!
(Note: If you want dialog boxes that look exactly like the FBJS ones, just google around a bit for Facebook dialog boxes... there's lots out there).