I've updated a theme so that all pages are loaded via ajax. On one of the pages I play mp3's using jplayer Circle player which works fine in firefox and safari but not in Chrome.
Here is the init script
jQuery(document).ready(function($){
var myCirclePlayer = new CirclePlayer(".jquery_jplayer_'.$counter.'",
{
mp3: "'.$track->album_track_mp3_url.'",
}, {
cssSelectorAncestor: ".cp_container_'.$counter.'",
swfPath: "'.get_template_directory_uri().'/scripts/frontend/Jplayer.swf",
wmode: "window",
supplied: "mp3"
});
});
Any ideas why its not working in Chrome?
jQuery(document).ready(function($){
var myCirclePlayer = new CirclePlayer(".jquery_jplayer_'.$counter.'",
{
mp3: "'.$track->album_track_mp3_url.'",
},
{
cssSelectorAncestor: ".cp_container_'.$counter.'",
swfPath: "'.get_template_directory_uri().'/scripts/frontend/Jplayer.swf",
wmode: "window",
supplied: "mp3",
solution: "flash, html"// after adding a line of code it will work on chrome
});
});
Related
I've built an extension that loads a React-application via an iframe.
I'm passing a message from the application and listening for that message in content script to ensure application has loaded.
Here's a simplified version of what I have so far:
App.js
componentDidMount() {
window.top.postMessage({isAppLoaded: true}, '*'};
}
Content.js
chrome.runtime.onMessage.addListener(function (msg, sender) {
if (msg.isPageLoaded) {
console.log('Current page has loaded!');
}
}
window.addEventListener('message', function(event) {
if (event.data.isAppLoaded) {
console.log('React app successfully loaded!');
}
}
Background.js
chrome.tabs.onUpdated.addListener(function (tabId, info) {
if (info.status === 'complete') {
chrome.tabs.query({active: true, currentWindow: true}, function(tabs) {
chrome.tabs.sendMessage(tabs[0].id, {isPageLoaded: true});
})
}
})
On some websites the page loads first then the React-app and vice-versa on some other websites. This becomes more complicated with websites that have lots of embedded iframes such as LinkedIn.
What is the correct/better way to guarantee the React-app AND the page has finished loading?
Please ignore the wildcard message passing. I'm aware of its security vulnerabilities. Above code snippets are simplified version of what I have.
Porting extension from Chrome into FF
Followed this tutorial (which works fine in Chrome): http://www.codingscripts.com/check-whether-user-has-a-chrome-extension-installed/
Sending message from webpage to extension:
In (web)pagescript.js this has:
function IsExist(extensionId,callback){
chrome.runtime.sendMessage(extensionId, { message: "installed" },
function (reply) {
if (reply) {
callback(true);
}else{
callback(false);
}
});
}
IsExist("Your extension id",function(installed){
if(!installed){
alert("Please install extension ");
}
});
Receiving message from webpage in extension:
chrome.runtime.onMessageExternal.addListener(
function(req, sender, callback) {
if (req) {
if (req.message) {
if (req.message == "installed") {
callback(true);
}
}
}
return true;
});
What I'm trying to achieve
A couple of html pages on my website need to redirect back to the homepage when the extension is NOT installed. So those pages need to be able to figure out (on their own) if the extension is installed or not.
Error I'm getting when I open webpage
ReferenceError : chrome is not defined. (I also tried with browser.runtime.onMessageExternal but then it throws "browser" is not defined).
Is there no way to do this similar to what can be done in Chrome ?
Thanks to all the comments this is what I came up with. (I had to go for document_end (altho comments advise document_start) cause I had other things going on in content_script.js
In my add-on's content_script.js
document.body.classList.add("plugininstalledblabla");
In my add-on's manifest.json
"content_scripts":
[
{
"matches": ["*://*/*"],
"all_frames": true,
"js": ["content_script.js"],
"run_at": "document_end"
}
]
in my website's main.js script
$(window).on("load", function() { // !! Window onLoad cause : document_end -> DOM should be loaded here
// Set
$body = $('body');
if(document.body.classList.contains("plugininstalledblabla")){
console.log('addon is installed');
}
});
I would like to link to chrome://history page in a button of an extension I'm working, but with href="chrome://history" the console says Not allowed to load local resource: chrome://history/
What can I do?
Thanks and greetings
Edited:
I'm trying with this:
The button I want to trigger with the event has .btn-history class.
In content.js:
function messaging(){
chrome.runtime.sendMessage({command: "openHistory"});
}
document.addEventListener('DOMContentLoaded', function () {
document.getElementsByClassName('btn-history')[0].addEventListener('click', messaging);
});
In background.js:
chrome.runtime.onMessage.addListener(function(message, sender, sendResponse) {
if(command == "openHistory") {
chrome.tabs.create({'url': 'chrome://history'});
}
});
But doesn't work.
If you are using jquery, you can have a button in your html, like so:
<button id="historyBtn">History</button>
And in your javascript you can use define an event handler for the button using jquery:
$(function(){
$("#historyBtn").click(function(){
chrome.tabs.create({url: "chrome://history"});
});
});
If you would like to change the currently active tab to open history, you can replace the chrome.tabs.create line in the above snippet with something like:
chrome.tabs.query({ active: true, currentWindow: true }, function (tabs) {
chrome.tabs.update(tabs[0].id, { url: "chrome://history" });
});
Hope this helps :)
I want to create a Chrome extension with a browser action onClicked which provides the same functionality as the following bookmark:
javascript:(function(){if(!window.page2rss_bookmark_urlr)window.page2rss_bookmark_urlr=function(ur){if(ur.error)alert(ur.error);if(ur.page&&ur.page.page)location.href=ur.page.page};var r=document.getElementById('urlFormRequest');if(r)r.parentNode.removeChild(r);r=document.createElement('script');r.id='urlFormRequest';r.type='text/javascript';r.src='http://page2rss.com/api/page?url='+encodeURIComponent(location.href)+'&callback=page2rss_bookmark_urlr';document.body.appendChild(r);})();
However, I struggle to correctly translate the javascript code of the bookmark into the logic of a Chrome extension. I thought the best to is to to put the exact code of the bookmark into a separate script create_feed_url.js and execute it in background.js. My background.js:
chrome.browserAction.onClicked.addListener(function(tab) {
// Run the bookmark code
chrome.tabs.executeScript(null, {file: "create_feed_url.js"});
// Open a new tab for a valid url resulting from create_feed_url.js
var feed_url = "http://page2rss.com/page?url=" + tab.url;
chrome.tabs.create({"url": feed_url});
Yet the code in create_feed_url.js somewhat runs not sucessfully. There is no feed URL generated, resulting in a non existing value for feed_url.
My questions:
Could you please help me to find out why I cannot just put the code of the bookmark into create_feed_url.js and run it?
Is this approach of executeScript recommendable in my case or is there a better way translating a bookmark into an extension?
I solved it with a workaround calling the URL that generates the new feed in a new tab before closing it and finally jumping to the tab with the final RSS feed URL. This solution does not require create_feed_url.js but relies completely on background.js:
chrome.browserAction.onClicked.addListener(function(tab) {
// Original bookmark JS code
//(function(){if(!window.page2rss_bookmark_urlr)window.page2rss_bookmark_urlr=function(ur){if(ur.error)alert(ur.error);if(ur.page&&ur.page.page)location.href=ur.page.page};var r=document.getElementById('urlFormRequest');if(r)r.parentNode.removeChild(r);r=document.createElement('script');r.id='urlFormRequest';r.type='text/javascript';r.src='http://page2rss.com/api/page?url='+encodeURIComponent(location.href)+'&callback=page2rss_bookmark_urlr';document.body.appendChild(r);})();
var create_feed_url = "http://page2rss.com/api/page?url=" + encodeURIComponent(tab.url); //+ "&callback=page2rss_bookmark_urlr"
var feed_url = "http://page2rss.com/page?url=" + tab.url;
chrome.tabs.create({"url": create_feed_url, active: false}, function(tab) {
chrome.browserAction.setBadgeText({text: 'wait'});
setTimeout(function() {
chrome.tabs.remove(tab.id, function(tab) {
chrome.browserAction.setBadgeText({text: ''});
});
}, 5000);
});
setTimeout(function() {
chrome.tabs.create({"url": feed_url, active: true}, function(tab) {
chrome.tabs.onUpdated.addListener(function( tabId , info ) {
if ( info.status == "complete" ) {
chrome.browserAction.setBadgeText({text: 'done', tabId: tabId});
}
});
}); }
, 1000);
});
Based on Rob's comment above of using a content script approach I tried to implement it. However, clicking on the browser icon does not trigger the content script create_feed_url.js through content_script.js. I tried to debug the code but neither the Developer Tools nor the inspect element tool show any error.
background.js:
chrome.browserAction.onClicked.addListener(function(tab) {
chrome.tabs.executeScript(null, {file: "content_script.js"});
});
content_script.js:
var s = document.createElement('script');
s.src = chrome.extension.getURL("create_feed_url.js");
s.onload = function() {
this.parentNode.removeChild(this);
};
(document.head||document.documentElement).appendChild(s);
create_feed_url.js:
(function(){if(!window.page2rss_bookmark_urlr)window.page2rss_bookmark_urlr=function(ur){if(ur.error)alert(ur.error);if(ur.page&&ur.page.page)location.href=ur.page.page};var r=document.getElementById('urlFormRequest');if(r)r.parentNode.removeChild(r);r=document.createElement('script');r.id='urlFormRequest';r.type='text/javascript';r.src='//page2rss.com/api/page?url='+encodeURIComponent(location.href)+'&callback=page2rss_bookmark_urlr';document.body.appendChild(r);})();
manifest.json:
{
"permissions": [
"tabs", "http://*/*", "https://*/*"
],
"background" : {
"scripts": ["background.js"],
"persistent": false
},
"web_accessible_resources": ["create_feed_url.js"],
"browser_action" :
{
"default_icon" : "rss-19.png",
"default_title" : "Create RSS feed for this page"
},
"manifest_version": 2
}
The idea is simple. Open a window and then call chrome.tabs.executeScript on that new window.
Unfortunately, it doesn't do anything besides open a new window.
function openc(url) {
window.open(url);
chrome.tabs.executeScript(null, {file: "removeContent.js"});
console.log("hi");
}
document.addEventListener('DOMContentLoaded', function () {
openc("http://www.asdf.com/");
});
First of all, make sure that you've got the host permissions to operate on the page.
If you always want to run the script on the specific page, it suffices to use only content scripts, by registration via the manifest file:
"content_scripts": [
{
"matches": ["http://example.com/*"],
"js": ["open-asdf.js"]
},
{
"matches": ["http://www.asdf.com/*"],
"js": ["removeContent.js"]
}
],
If you want to dynamically execute a content script for the new page, you should use the chrome.tabs.create method to open the new tab, and insert the script in the callback. These methods can only be used in the extension's process, so make sure that the code is running on the background/event/popup/options/.. page.
chrome.tabs.create({
url: 'http://www.asdf.com/'
}, function(tab) {
chrome.tabs.executeScript(tab.id, {file: "removeContent.js"}, function() {
if (chrome.runtime.lastError) {
console.error(chrome.runtime.lastError.message);
}
});
});