My chrome extension is very simple. After the popup is clicked an iframe is loaded. The chrome extension is slightly slow. I click the icon and it takes about a second and a half to load, and I feel like that is too slow. I'd like the popup to show instantly but have the iframe load after.. or perhaps there is an even quicker way... The site that I am iframing only has a textbox visible so in theory the popup should load pretty quickly but I'm just not getting it.
My manifest file basically is:
"browser_action": {
"default_icon": "icon128.png",
"default_popup": "main.html"
},
"background": {
"page": "main.html"
}
iframe blocks page load.
what it means is that until your iframe(s) are fully loaded the page is not considered "finished" loading, there for Chrome extension is delaying and won't show.
this blocking behavior is related to iframes behavior and not a Chrome specific issue.
to over come this, you should load your page without the iframe or iframe with src attribute of 'about:blank' and when the page is loaded add/update the iframe src attribute.
you can also add 'onLoad' event for the iframe to detect when it is finished loading to trigger your loader/spinner to hide.
here is an example in React
const Main = () => {
// state for the loader
const [loading, setLoading] = useState(true);
// state for the iframe source url
const [iframeSrc, setIframeSrc] = useState(null);
// first useEffect to see that page is fully loaded (componentDidMount in class syntax)
useEffect(() => {
setIframeSrc('https://www.your-slow-website.com');
}, []);
return (
<div style={{width: '200px'}}>
{loading && <div>LOADING...</div>}
{iframeSrc && (
<iframe onLoad={() => setLoading(false)} src={iframeSrc} style={{border: 'none', width: '100%'}} />
)}
</div>
);
};
As any async call, it may take an undeterminable amount of time to return. One clean solution would be to simply add a loading icon to your main.html. And after the iframe loads simply hide the loading icon.
It should help with the user experience as they'll be able to see at least something right after clicking the icon.
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 would like to ask a way to inject css or delete injected css through browse action pop up window for the chrome extension. I had try to look through few places to get ideal on how to do it but I fail to understand them.
I would like to make extension which similar to "A browser action with a popup that changes the page color" but click on the div in the popup.html to load or unload the css file that created.
This is my current work (https://github.com/Zhekoay/Self-Custom-Dark-Theme) which direct insert css using content script. Now i would like to make it able to load or unload differently instead one-time load all.
Chrome API can't remove CSS injected via manifest.json.
Inject the code just like the demo extension does, but use a file parameter with a name of your content script that will add or remove (if it exists) a link element under document.documentElement with an id equal to chrome.runtime.id and href pointing to a web accessible CSS file.
remove "content_scripts" from manifest.json
add "web_accessible_resources": ["*.css"] to manifest.json
add a click handler for the div in popup.js
in the click handler: chrome.tabs.executeScript({file: 'content.js'});
content.js:
(function() {
var styleElement = document.getElementById(chrome.runtime.id);
if (styleElement) {
styleElement.remove();
return;
}
var css = ({
'www.youtube.com': 'app_yt_HoveredImg.css',
'www.messenger.com': 'fb_messenger_styles.css',
'www.google.com': 'google_styles.css',
'translate.google.com': 'google_styles.css',
'apis.google.com': 'google_styles.css',
})[location.hostname];
if (!css) {
return;
}
styleElement = document.createElement('link');
styleElement.id = chrome.runtime.id;
styleElement.rel = 'stylesheet';
styleElement.href = chrome.runtime.getURL(css);
document.documentElement.appendChild(styleElement);
})();
Note, in this workflow you only need "permissions": ["activeTab"] instead of "tabs": the advantage is that activeTab doesn't ask for permissions when the extension is installed.
I wrote a Chrome Extension page action, with the following implementation:
In manifest.json:
"permissions" : [
"declarativeContent"
],
In background.js:
chrome.runtime.onInstalled.addListener(function() {
// Replace all rules ...
chrome.declarativeContent.onPageChanged.removeRules(undefined, function() {
// With a new rule ...
chrome.declarativeContent.onPageChanged.addRules([
{
conditions: [
new chrome.declarativeContent.PageStateMatcher({
pageUrl: { urlMatches: 'www\.somewebsite\.com/(translate|revise)/' },
})
],
// And shows the extension's page action.
actions: [ new chrome.declarativeContent.ShowPageAction() ]
}
]);
});
});
I noticed that in most Chrome browsers, the page action icon appears correctly inside the address and only appears when the matching page is met:
However, in some browsers recently page actions started appearing as enabled/disabled browser actions, i.e. outside the address bar, which is a lot clumsier because the whole idea around page actions icons is that they appear if and only if the page is relevant to them. There is no point showing a disabled page action for most of the time. Actually, it happened to browsers where it used to work well days ago, like if a Chrome update had some side effects.
I presume this is related to some Chrome setting that now shows all extensions there, but is there any way I can force the page action to appear consistently in the address bar and only appear when it can be really useful?
It appears like this is the result of a new update to Chrome, with the developers probably reasoning that most users would not know that they had extensions installed otherwise.
Link to announcement: https://groups.google.com/a/chromium.org/forum/#!searchin/chromium-extensions/upcoming/chromium-extensions/7As9MKhav5E/dNiZDoSCCQAJ
It doesn't look like extension developers can do anything about this, but I really hope Google reverts this change.
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);
});
I'm brand new to making Chrome Extensions and have done the simple tutorials, but I'm having trouble finding what I need. I want the extension to allow a user to chose an image on a webpage, and then copy the URL for that image into the extension. Can anyone help me out? I'm sure if I see an example I'd get a better grasp on how extensions can interact with a page.
From what I understand of your question, I'd say you want to create a context menu item that shows up when you right-click an image. For example, in your background script, use:
chrome.contextMenus.create({
title: "Use URL of image somehow",
contexts:["image"],
onclick: function(info) {
handleImageURL(info.srcUrl);
}
});
function handleImageURL(url) {
// now do something with the URL string in the background page
}
This will add a context menu item that shows up on all pages, but only when you right-click on images. When the user selects it, the onclick handler of the menu item fires handleImageURL with the URL of the image as the argument. The URL can be processed in any way you like, e.g., saved in a localStorage list, sent to a server via Ajax, or passed in a message to a listening content script in the current tab.
EDIT with alternative:
You might want a content script that gets injected into every page. The script could bind an event listener to every image element at load time:
// in my_content_script.js...
var imgs = document.getElementsByTagName("img");
for(var i = 0, i < imgs.length; ++i) {
imgs[i].addEventListener("click", function() {
alert(this.src);
// do things with the image URL, this.src
});
}
To inject it into all subdomains of example.com, your manifest would include:
...
"content_scripts": {
"matches":["*://*.example.com/*"],
"scripts":["my_content_script.js"]
},
...
Note that this pure-JS solution doesn't attach listeners to images dynamically added after load time. To do that in your content script with jQuery, use:
$(document).on("click", " img", function() {
alert(this.src);
});
And add your jQuery file name to the scripts array in your manifest, next to my_content_script.js.
Based on this Google Chrome Extension sample:
var images = [].slice.apply(document.getElementsByTagName('img'));
var imageURLs = images.map(function(image) {
return image.src;
});
chrome.extension.sendRequest(images);
For a more detailed example (e.g. how to handle the request), you can check out this extension I wrote called Image Downloader