am a newbie, trying to write some basics extension. For my extension to work i need to initialize some data, so what I did is inside my background.js i declared something like this.
localStorage["frequency"] = 1; //I want one as Default value. This line is not inside any method, its just the first line of the file background.js
Users can goto Options page and change this above variable to any value using the GUI. As soon as the user changes it in UI am updating that value.
Now the problem is to my understanding background.js reloads everytime the machine is restarted. So every time I restart my machine and open Chrome the frequency value is changed back to 1. In order to avoid this where I need to initialize this value?
You could just use a specific default key. So if frequency is not set you would try default-frequency. The default keys are then still set or defined in the background.js.
I like to do that in one step, in a function like this
function storageGet(key,defaultValue){
var item = localstorage.getItem(key);
if(item === null)return defaultValue;
else return item;
}
(According to the specification localstorage must return null if no value has been set.)
So for your case it would look something like
var f = storageGet("frequency",1);
Furthermore you might be interested in checking out the chrome.storage API. It's used similar to localstorage but provides additional functionalities which might be useful for your extension. In particular it supports to synchronize the user data across different chrome browsers.
edit I changed the if statement in regard to apsillers objection. But since the specification says it's ought to be null, I think it makes sense to check for that instead of undefined.
This is another solution:
// background.js
initializeDefaultValues();
function initializeDefaultValues() {
if (localStorage.getItem('default_values_initialized')) {
return;
}
// set default values for your variable here
localStorage.setItem('frequency', 1);
localStorage.setItem('default_values_initialized', true);
}
I think the problem lies with your syntax. To get and set your localStorage values try using this:
// to set
localStorage.setItem("frequency", 1);
// to get
localStorage.getItem("frequency");
Related
I am trying to build a logging mechanism, to log changes done to a record. I am currently logging previous and new record. However, as the site is very busy, I expect the logfile to grow seriously huge. To avoid this, I plan to only capture the modified fields only.
Is there a way to capture only the modifications done to a record (in REACT), so my {request.body} will have fewer fields?
My Server-side is build with NODE.JS and the client-side is REACT.
One approach you might want to consider is to add an onChange(universal) or onTextChanged(native) listener to the text field and store the form update in a local state/variables.
Finally, when a user makes an action (submit, etc.) you can send the updated data to the logging module.
The best way I found and works for me is …
on the api server-side, where I handle the update request, before hitting the database, I do a difference between the previous record and {request.body} using lodash and use the result to send to my update database function
var _ = require('lodash');
const difference = (object, base) => {
function changes(object, base) {
return _.transform(object, function (result, value, key) {
if (!_.isEqual(value, base[key])) {
result[key] = (_.isObject(value) && _.isObject(base[key])) ? changes(value, base[key]) : value;
}
});
}
return changes(object, base);
}
module.exports = difference
I saved the above code in a file named diff.js and included it in my server-side file.
It worked good.
Thanks for giving the idea...
Essentially I want to have a script execute when the contents of a DIV change. Since the scripts are separate (content script in the Chrome extension & webpage script), I need a way simply observe changes in DOM state. I could set up polling but that seems sloppy.
For a long time, DOM3 mutation events were the best available solution, but they have been deprecated for performance reasons. DOM4 Mutation Observers are the replacement for deprecated DOM3 mutation events. They are currently implemented in modern browsers as MutationObserver (or as the vendor-prefixed WebKitMutationObserver in old versions of Chrome):
MutationObserver = window.MutationObserver || window.WebKitMutationObserver;
var observer = new MutationObserver(function(mutations, observer) {
// fired when a mutation occurs
console.log(mutations, observer);
// ...
});
// define what element should be observed by the observer
// and what types of mutations trigger the callback
observer.observe(document, {
subtree: true,
attributes: true
//...
});
This example listens for DOM changes on document and its entire subtree, and it will fire on changes to element attributes as well as structural changes. The draft spec has a full list of valid mutation listener properties:
childList
Set to true if mutations to target's children are to be observed.
attributes
Set to true if mutations to target's attributes are to be observed.
characterData
Set to true if mutations to target's data are to be observed.
subtree
Set to true if mutations to not just target, but also target's descendants are to be observed.
attributeOldValue
Set to true if attributes is set to true and target's attribute value before the mutation needs to be recorded.
characterDataOldValue
Set to true if characterData is set to true and target's data before the mutation needs to be recorded.
attributeFilter
Set to a list of attribute local names (without namespace) if not all attribute mutations need to be observed.
(This list is current as of April 2014; you may check the specification for any changes.)
Edit
This answer is now deprecated. See the answer by apsillers.
Since this is for a Chrome extension, you might as well use the standard DOM event - DOMSubtreeModified. See the support for this event across browsers. It has been supported in Chrome since 1.0.
$("#someDiv").bind("DOMSubtreeModified", function() {
alert("tree changed");
});
See a working example here.
Many sites use AJAX/XHR/fetch to add, show, modify content dynamically and window.history API instead of in-site navigation so current URL is changed programmatically. Such sites are called SPA, short for Single Page Application.
Usual JS methods of detecting page changes
MutationObserver (docs) to literally detect DOM changes.
Info/examples:
How to change the HTML content as it's loading on the page
Performance of MutationObserver to detect nodes in entire DOM.
Lightweight observer to react to a change only if URL also changed:
let lastUrl = location.href;
new MutationObserver(() => {
const url = location.href;
if (url !== lastUrl) {
lastUrl = url;
onUrlChange();
}
}).observe(document, {subtree: true, childList: true});
function onUrlChange() {
console.log('URL changed!', location.href);
}
Event listener for sites that signal content change by sending a DOM event:
pjax:end on document used by many pjax-based sites e.g. GitHub,
see How to run jQuery before and after a pjax load?
message on window used by e.g. Google search in Chrome browser,
see Chrome extension detect Google search refresh
yt-navigate-finish used by Youtube,
see How to detect page navigation on YouTube and modify its appearance seamlessly?
Periodic checking of DOM via setInterval:
Obviously this will work only in cases when you wait for a specific element identified by its id/selector to appear, and it won't let you universally detect new dynamically added content unless you invent some kind of fingerprinting the existing contents.
Cloaking History API:
let _pushState = History.prototype.pushState;
History.prototype.pushState = function (state, title, url) {
_pushState.call(this, state, title, url);
console.log('URL changed', url)
};
Listening to hashchange, popstate events:
window.addEventListener('hashchange', e => {
console.log('URL hash changed', e);
doSomething();
});
window.addEventListener('popstate', e => {
console.log('State changed', e);
doSomething();
});
P.S. All these methods can be used in a WebExtension's content script. It's because the case we're looking at is where the URL was changed via history.pushState or replaceState so the page itself remained the same with the same content script environment.
Another approach depending on how you are changing the div.
If you are using JQuery to change a div's contents with its html() method, you can extend that method and call a registration function each time you put html into a div.
(function( $, oldHtmlMethod ){
// Override the core html method in the jQuery object.
$.fn.html = function(){
// Execute the original HTML method using the
// augmented arguments collection.
var results = oldHtmlMethod.apply( this, arguments );
com.invisibility.elements.findAndRegisterElements(this);
return results;
};
})( jQuery, jQuery.fn.html );
We just intercept the calls to html(), call a registration function with this, which in the context refers to the target element getting new content, then we pass on the call to the original jquery.html() function. Remember to return the results of the original html() method, because JQuery expects it for method chaining.
For more info on method overriding and extension, check out http://www.bennadel.com/blog/2009-Using-Self-Executing-Function-Arguments-To-Override-Core-jQuery-Methods.htm, which is where I cribbed the closure function. Also check out the plugins tutorial at JQuery's site.
In addition to the "raw" tools provided by MutationObserver API, there exist "convenience" libraries to work with DOM mutations.
Consider: MutationObserver represents each DOM change in terms of subtrees. So if you're, for instance, waiting for a certain element to be inserted, it may be deep inside the children of mutations.mutation[i].addedNodes[j].
Another problem is when your own code, in reaction to mutations, changes DOM - you often want to filter it out.
A good convenience library that solves such problems is mutation-summary (disclaimer: I'm not the author, just a satisfied user), which enables you to specify queries of what you're interested in, and get exactly that.
Basic usage example from the docs:
var observer = new MutationSummary({
callback: updateWidgets,
queries: [{
element: '[data-widget]'
}]
});
function updateWidgets(summaries) {
var widgetSummary = summaries[0];
widgetSummary.added.forEach(buildNewWidget);
widgetSummary.removed.forEach(cleanupExistingWidget);
}
Is it possible to change Magento template via query string?
I am developing a custom template and sometimes I want to check if I broke something, so I want to change via query string the theme for the default one.
I am looing for something like this:
?_theme=default
Does something like this exists?
Programmatically:
You could write an observer that is listening to event <controller_action_predispatch>
The observer method could look like this:
public function changeTheme(){
if (Mage::app()->getRequest()->getParam('layout_switch') == '1'){
Mage::getDesign()->setArea(‘frontend’)
->setPackageName(Mage::app()->getRequest()->getParam('package'))
->setTheme(Mage::app()->getRequest()->getParam('theme'));
}
return;
}
}
Then you would just need to call your page with e.g.
yourdomain.com/index.php/layout_switch/1/package/default/theme/default
The short answer is no you can't (as far as I know)
However if it's your local installation (which you use only as a development enviroment!) you can use a trick:
Create another Store view and assign whatever theme you want to that store view and then access it like yourstore.com/?___store=storecode
as simple as 1-2-3.:) Create a new dev theme and copy all the files from the current live theme to the new one (both app/design and sking). Then observe controller_action_predispatch event and then in the observer function simply:
$controllerAction = $observer->getControllerAction();
if ($controllerAction->getLayout()->getArea() == Mage_Core_Model_App_Area::AREA_FRONTEND) {
$ipAddress = Mage::helper('core/http')->getRemoteAddr();
$ipAddresses = array('xxx.xxx.xxx.xxx');
if (in_array($ipAddress, $ipAddresses)) {
Mage::getDesign()->setTheme('theme-wanted');
}
}
Very helpful for design tweaks indeed. After the work is finished the observer should be disabled or module deactivated until next time
I want to save some value (say userid) from my extension and then want to access it on other pages. I cannot do it using cookie because I can access cookie only within the extension.
Is there a way to do that?
I am sorry, it might just be me being thick but I still don't really understand what you are trying to do.
If you are wanting to create a variable that persists across different domains, you need to use chrome.storage. It is similar to HTML5 localStorage but with some significant improvements (persisting across domains being a main one for me). You can read more about setting and getting the values here:
http://developer.chrome.com/extensions/storage.html
If this isn't what you need, please try to give a specific example of what you are trying to do and I will try again.
EDIT: Please see below for examples.
You can set a variable into storage like this (the function is an optional param):
var storage = chrome.storage.local;
var myVal="foo";
storage.set({'myVar': myVal}, function() {
alert('myVar has been saved in local storage');
});
You can retrieve it like this (function is NOT optional):
storage.get('myVar', function(items) {
if (items.myVar) {
alert(items.myVar);
}
});
You can return default values when 'myVar' is undefined by storage.get({'myVar': ''}) - this saves checking with the "if (items.myVar) {" line.
EDIT: Please see below for issues to watch out for.
Firstly, the methods are asynchronous. So...
alert("1");
storage.get('myVar', function(items) {
alert("2");
});
alert("3");
will probably output 1, then 3, then 2. Not a big deal but saves a lot of restructuring later if you know beforehand.
Secondly,
please note that there is a limit to the amount of storage space you have.
For chrome.storage.sync (for which the variable are automatically synced across all of that users browsers) the storage space is very limited at about 100kb. (there are other limits as well, such as a max of 512 separate variables - see the documentation link above). Basically, chrome.storage.sync is for a few small variables only.
chrome.storage.local has much more storage space at about 5mb (unless you set the unlimited storage permission). Unlike chrome.storage.sync there is no other limits on storage chrome.storage.local.
If a set will take you over the storage limit, then it fails.
Thirdly, using a variable as your variable name does NOT work:
var myVal="foo";
var myVarName='myVar';
storage.set({myVarName: myVal}, function() {
alert('THIS WILL NOT WORK');
});
If like me, you really wanted/needed to do something like this, the way to do something like this is by creating an object and assigning it the variables as properties and then putting the object in storage. For example:
var myVarName='myVar';
var mySecondVarName='mySecondVar';
var myVal="foo";
var mySecondVal="bar";
var obj = {};
obj[myVarName] = myVal;
obj[mySecondVarName] = mySecondVal;
//add as many vars as you want to save to the storage
//(as long as you do not exceed the max storage space as mentioned above.)
storage.local.set(obj);
you can then get the values with:
chrome.storage.local.get(myVarName, function (items) {
if (items[myVarName]) {
alert('You got the value that was set to myVarName');
}
});
Or if you wanted the value for mySecondVarName:
chrome.storage.local.get(mySecondVarName, function (items) {
if (items[mySecondVarName]) {
alert('You got the value that was set to mySecondVarName');
}
});
And these can be nested.
I am working with a node.js project (using Wikistream as a basis, so not totally my own code) which streams real-time wikipedia edits. The code breaks each edit down into its component parts and stores it as an object (See the gist at https://gist.github.com/2770152). One of the parts is a URL. I am wondering if it is possible, when parsing each edit, to scrape the URL for each edit that shows the differences between the pre-edited and post edited wikipedia page, grab the difference (inside a span class called 'diffchange diffchange-inline', for example) and add that as another property of the object. Right not it could just be a string, does not have to be fully structured.
I've tried using nodeio and have some code like this (i am specifically trying to only scrape edits that have been marked in the comments (m[6]) as possible vandalism):
if (m[6].match(/vandal/) && namespace === "article"){
nodeio.scrape(function(){
this.getHtml(m[3], function(err, $){
//console.log('getting HTML, boss.');
console.log(err);
var output = [];
$('span.diffchange.diffchange-inline').each(function(scraped){
output.push(scraped.text);
});
vandalContent = output.toString();
});
});
} else {
vandalContent = "no content";
}
When it hits the conditional statement it scrapes one time and then the program closes out. It does not store the desired content as a property of the object. If the condition is not met, it does store a vandalContent property set to "no content".
What I am wondering is: Is it even possible to scrape like this on the fly? is the scraping bogging the program down? Are there other suggested ways to get a similar result?
I haven't used nodeio yet, but the signature looks to be an async callback, so from the program flow perspective, that happens in the background and therefore does not block the next statement from occurring (next statement being whatever is outside your if block).
It looks like you're trying to do it sequentially, which means you need to either rethink what you want your callback to do or else force it to be sequential by putting the whole thing in a while loop that exits only when you have vandalcontent (which I wouldn't recommend).
For a test, try doing a console.log on your vandalContent in the callback and see what it spits out.