Comments (9)
Short video explaining how Mutation Summary works.
https://www.youtube.com/watch?v=eRZ4pO0gVWw
from dark-patterns.
We decided to integrate this library into OpenWPM and test on some product pages with social proof messages.
from dark-patterns.
I created a few Javascript examples to help determine how useful Mutation Summary might be in our case.
https://jsbin.com/dewiwufuxa/edit
from dark-patterns.
I integrated MutationSummary into OpenWPM and started processing mutation summary events:
https://github.com/gunesacar/OpenWPM/blob/661439178861217c398bd31aa07fd3ce55103508/automation/Extension/firefox/data/content.js#L2048-L2105
For the moment I prepended the mutation library code to content.js
. I could not immediately use the library from content.js when I add it separately - perhaps due to timing issues.
from dark-patterns.
Here are the logs for the slightly modified version of the jsbin you shared:
https://gist.github.com/gunesacar/f5f9b43670bb63dd4fd8c94639116041
I log node type, text content (and wholeText), ID assigned by the library and old value of the attributes and text content when available. See the console.log
calls in content.js for the details.
I also included the logs from loading princeton.edu homepage, gives an idea about what we should filter.
from dark-patterns.
I started filtering summaries by element type and extract relevant info including visibility and computed style:
https://github.com/gunesacar/OpenWPM/blob/027c460ddc98cb0eee9701070dcebe71faa0ef5d/automation/Extension/firefox/data/content.js#L2099
I used this JSfiddle for development: http://jsfiddle.net/xdqncyrp/76/
Feel free to fork.
Updated logs I got by loading princeton.edu homepage:
https://gist.github.com/gunesacar/b13f23769e75b62896fab5e43f978f4e
from dark-patterns.
@aruneshmathur do we have examples using CSS Transitions? I wonder how those will show up in the summaries.
from dark-patterns.
We don't currently but I can create some. I'm not hopeful we'll see them through Mutation Summary unless they are injected via JS into the page.
from dark-patterns.
It appears that Mutation Summary library pretty reliably detects transient elements and works well within OpenWPM as a content script.
The challenge we have is to figure out how to integrate mutations into the data collection pipeline, esp. segmenting and clustering. For instances, would we re-segment every time a new element is added to, or removed from the DOM. Elements with dynamically changing text (e.g. countdown timers) presents another challenge: how to represent features when they change rapidly for some elements, and do not change at all for others.
To focus on setting up the data collection and processing pipeline we've decided to ignore transient events for the time being.
The code lives here: https://github.com/gunesacar/OpenWPM/blob/mutation_summary/automation/Extension/firefox/data/content.js
from dark-patterns.
Related Issues (20)
- Attribute DOM changes to scripts HOT 1
- Move product attribute code to Javascript HOT 1
- Store number of buttons, imgs, links inside each segment HOT 1
- Store details of the longest text node of each segment HOT 1
- Handle cases where computed style is null HOT 4
- Integrate segmentation into mutation summary event flow HOT 2
- Rate limit/throttle segmentation and element snapshots HOT 1
- Add unique IDs to elements HOT 1
- Handling body elements with 0 width and height
- Build a clustering dashboard HOT 1
- Incorrect background-color value HOT 3
- Link segments to phases HOT 2
- Evaluate the accuracy of shopping website detection HOT 2
- Evaluate accuracy of checkout crawler HOT 1
- Limit product attribute selection HOT 1
- Clustering preprocessing
- Related Work section HOT 1
- Introduction section
- Methods section HOT 1
- Clean up the analysis notebooks
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from dark-patterns.