I have problem conflict when import more jquery files in on my project. The context in here is : i'm running a project without import requirejs, on this project i have already imported jquery and some jquery plugins on that, it works fine. And now, i need to use a service from the other site, it need to use requirejs to loading some javascript files from that site :
prefixUrl = "http://mysite.com";
require = {
baseUrl : prefixUrl + "/js",
waitSeconds : 30,
paths : {
"jquery" : "http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min",
"jquery.validate" : "/jquery.validate.min-1.8.1",
"jquery.string" : "/jQueryString-2.0.2-Min",
"jquery.cookie" : "/jquery.cookie",
"jquery.lightbox" : "/lightbox/jquery.lightbox",
"thickbox" : "/thickbox/thickbox",
"marketo.form" : "mktFormSupport",
"templates" : "../templates",
"login" : "/cloud-workspaces-extension/js/login",
"rememberme-checkbox" : "/platform-extension/javascript/iphone-style-checkboxes"
},
shim : {
'jquery.validate' : [ "jquery" ],
'jquery.string' : [ "jquery" ],
'jquery.cookie' : [ "jquery" ],
'jquery.lightbox' : [ "jquery" ],
"thickbox" : [ "jquery" ],
"marketo.form" : {
deps : [ "jquery" ],
exports : "Mkto"
},
"rememberme-checkbox" : [ "jquery" ]
},
deps : [ "jquery", "jquery.validate", "jquery.string", "jquery.cookie" ].
callback: function(){
// handle
}
}
As you can see, it will be loading more a jquery file 1.7 from googleapis. That means it will overrite the current jquery on my project (i didn't use jquery noConflict) and some jquery plugins which init when the page load and document ready has been reset and remove instances their handles.
So, anybody can help me find another the solution for this case? I can use jquery noconflict for the current on my site, but that mean i will replace a lots of things javascript running good on my site. So, i'm looking for the good way can be import the service and workaround in it.
Related
I have an application loading modules via requirejs running on an Apache Tomcat server (9.0.48). When upgrading from tomcat 9.0.46 to 9.0.48, I've noticed inconsistent page loading with error Load timeout for modules: ....
When the module loading fails, Content Download time for the larger modules (jquery, wysihtml5) goes from ~100ms to 1 minute. Overall, the entire page load time increased from ~500ms to ~600ms. I haven’t observed download times larger than 200ms with tomcat-coyote from tomcat 9.0.46; seems like this is new with the 9.0.48 tomcat-coyote lib.
Is there a way to speed up the module download times?
Configuration
requirejs config
requirejs loaded as data-main:
<script type="text/javascript" src="/configurator/assets/js/lib/utils/require-2.3.6.min.js" data-main="/configurator/assets/js/main"></script>
requirejs.config({
"paths" : {
"jquery" : "lib/jquery/jquery-1.8.3",
"jquery-ui" : "lib/jquery/jquery-ui-1.10.3.custom.min",
"fileupload" : "lib/jquery/jquery.fileupload",
"jquery.iframe" : "lib/jquery/jquery.iframe-transport",
"jquery.ui.widget" : "lib/jquery/jquery.ui.widget",
"jquery.ba-hashchange" : "lib/jquery/jquery.ba-hashchange",
"underscore" : "lib/utils/lodash-1.0.0-rc3.min",
"wysihtml5" : "lib/xing-wysihtml5/wysihtml5-0.3.0",
"wysihtml5_parserrules" : "lib/xing-wysihtml5/advanced",
"bootstrap" : "lib/bootstrap/bootstrap-2.1.0.min",
"can" : "lib/can/can",
"configurator" : "app/configurator",
},
"shim" : {
"jquery": {
"deps" : [ ],
"exports" : "jQuery"
}
"underscore" : {
"deps" : [ ],
"exports" : "_"
},
"less" : {
"deps" : [ ],
"exports" : "less"
},
"fileupload" : {
"deps" : [ "jquery" ],
"exports" : "fileupload"
},
"bootstrap" : {
"deps" : [ "jquery-ui" ],
"exports" : "bootstrap"
},
"jquery-ui" : {
"deps" : [ "jquery" ],
"exports" : "jquery-ui"
},
"jquery.iframe" : {
"deps" : [ "jquery" ],
"exports" : "jquery.iframe"
},
"jquery.ui.widget" : {
"deps" : [ "jquery" ],
"exports" : "jquery.ui.widget"
}
},
"modules" : [ {
"name" : "main"
} ],
"appDir" : ".",
"baseUrl" : "../../../configurator/assets/js",
"waitSeconds": "0"
});
require([
'jquery',
'can',
'underscore',
'configurator',
'bootstrap'
], function($, can, _, Configurator) {
...
});
});
Tomcat Connector config
<Connector port="8443" address="0.0.0.0" SSLEnabled="true"
maxHttpHeaderSize="8192" emptySessionPath="false"
maxKeepAliveRequests="-1"
maxThreads="150" minSpareThreads="25" maxSpareThreads="75"
enableLookups="false" disableUploadTimeout="true"
acceptCount="100" scheme="https" secure="true"
clientAuth="false" sslProtocol="TLSv1.2" sslEnabledProtocols="TLSv1.2"
keystoreFile="..." keystorePass="..." keystoreType="..."
useBodyEncodingForURI="true" URIEncoding="UTF-8"
ciphers="..." />
This issue appears to be fixed in Tomcat 9.0.52. Associated Bug: https://bz.apache.org/bugzilla/show_bug.cgi?id=65448
I am looking for simple solution of my problem.
Pressing ctrl+alt+lmb should fire my script and I can achieve that using content_scripts, but content_scripts does not have access to chrome.*.
Any suggestions?
manifest.json
{
"manifest_version": 2,
"version": "1.0",
"name" : "Incognito Shortcut",
"content_scripts" : [
{
"matches" : ["*://*/*"],
"js" : ["core.js"],
"run_at" : "document_end",
"all_frames" : true
}
],
"permissions" : [
"tabs"
]
}
core.js
document.addEventListener("click", function(e) {
if(e.altKey && e.ctrlKey) {
// do stuff
e.preventDefault();
}
}, false);
Standard approach in such situation, is that you'll have to pass messages from content script to the background page (which has access to the most of chrome api's). E.g. content script will send message to the background-page and background page will call some appropriate chrome api
If you will read articles Content-Scripts and Message Passing from official documentation, you should be able to implement it easily.
I've tried browsing through similar questions posted here, but none seems to work
Manifest.json
{
"manifest_version": 2,
"name" : "A simple Found Text Demo",
"description" : "Bla",
"version" : "1.0",
"background" : {
"pages" : "background.html"
},
"page_action" : {
"default_icon" : "icon.png"
},
"content_scripts" : [{
"matches" : ["*://*/*"],
"js" : ["contentscript.js"]
}]
}
Background.html
<html>
<script>
chrome.extension.onMessage.addListener(
function(request, sender, sendResponse){
alert(request);
//chrome.pageAction.show(sender.tab.id);
sendResponse('Found!');
}
)
</script>
</html>
Contentscript.js
chrome.extension.sendMessage({"name" : "hola"}, function(res){
console.log(res); })
However I repeatedly get the same error :
Port error: Could not establish connection. Receiving end does not exist.
Any ideas?
Since things changed over to manifest 2, you are actually no longer allowed to use in-line scripts (such as what you have in your background.html in the <script> tags above. See here). I'm not sure of your use case, but in most cases simple cases (read: the stuff I've done :) ), you don't actually need to populate background.html with anything. Instead, you can directly pass in a background.js file that will contain the same script you have above. Therefore you can try changing your manifest.json to this:
{
"manifest_version": 2,
"name" : "A simple Found Text Demo",
"description" : "Bla",
"version" : "1.0",
"background" : {
"scripts" : ["background.js"]
},
"page_action" : {
"default_icon" : "icon.png"
},
"content_scripts" : [{
"matches" : ["*://*/*"],
"js" : ["contentscript.js"],
"run_at": "document_end"
}]
}
Note we did two things here - changed pages to scripts inside of background and pointed it to ["background.js"], and then added "run_at": "document_end" to the end of the content_scripts section. This is something that can definitely cause issues if left out (issues similar to what you are seeing now) - you are now telling the content script to run after the page has loaded. If it runs immediately, you run the risk of the background page not having loaded, which means it isn't yet ready to receive messages and gives you the connection error. Below is background.js, which is identical to the script you had in between your <script> tags before:
chrome.extension.onMessage.addListener(
function(request, sender, sendResponse){
alert(request);
//chrome.pageAction.show(sender.tab.id);
sendResponse('Found!');
}
)
How do I auto load script when a page loads?
I have this extension source:
{ "browser_action" : { "default_icon" : "icon.png"},
"description" : "Alert on Google Load",
"icons" : { "128" : "icon.png" },
"name" : "Auto alert",
"version" : "1.0",
"content_scripts": [
{
"matches": ["http://www.google*"],
"js": ["myscript.js"],
"run_at": ["document_end"]
}
],
}
Now myscript.js includes:
alert("hi")
But when i load google.com, nothing happens.
thanks alot.
The match pattern you are using (http://www.google*) is invalid. You can use the wildcard character (*) as scheme, host or path parts of URL. You can not use it as a part of domain.
If you want to match all Google sites, you should use this pattern:
*://*.google.com/*
You can read about match patterns, including good and bad examples, in the documentation at: http://developer.chrome.com/extensions/match_patterns.html
When I'm running the Chromium browser using:
chromium-browser --load-extension=/path/to/my/extension
--user-data-dir=/path/to/chrome/profile --app=http://localhost/somepage
some content scripts are not injected into the page. These scripts are defined as follows in the manifest file:
"content_scripts" : [{
"matches" : [ "http://*/*", "https://*/*" ],
"js" : [ "content/s1.js", "content/s2.js", "content/s3.js", "content/s4.js" ],
"run_at" : "document_end"
}]
When inspecting the page, I see that only s1.js and s4.js were injected successfully. After reloading the page all scripts are injected correctly, and my extension works as expected.
What can be the reason for that, and how to debug this?
Edit:
Those content scripts (that fail to inject sometimes) reference 'document' at the beginning. It seems like if I wrap them into something like:
setTimeout(function() { document. ... }, 5000);
They are always injected as expected. Is it possible that the document is not available, even though "run_at": "document_end" was specified in manifest?
Thanks!
You can better do this:
Create 1 content.js script:
/* inject script */
try {
var script1 = document.createElement("script");script1.type = "text/javascript";script1.src = chrome.extension.getURL("/js/injected1.js");document.getElementsByTagName("head")[0].appendChild(script1);
var script2 = document.createElement("script");script2.type = "text/javascript";script2.src = chrome.extension.getURL("/js/injected2.js");document.getElementsByTagName("head")[0].appendChild(script2);
var script3 = document.createElement("script");script3.type = "text/javascript";script3.src = chrome.extension.getURL("/js/injected3.js");document.getElementsByTagName("head")[0].appendChild(script3);
var script4 = document.createElement("script");script4.type = "text/javascript";script4.src = chrome.extension.getURL("/js/injected4.js");document.getElementsByTagName("head")[0].appendChild(script4);
} catch(e) {}
in the manifest.json:
"content_scripts" : [{
"matches" : [ "http://*/*", "https://*/*" ],
"js" : [ "content.js" ],
"run_at" : "document_end"
}]