{"id":26178698,"url":"https://github.com/linkorb/tweakjs","last_synced_at":"2025-04-14T22:26:59.400Z","repository":{"id":57127018,"uuid":"131523114","full_name":"linkorb/tweakjs","owner":"linkorb","description":"tweak.js library","archived":false,"fork":false,"pushed_at":"2023-10-26T22:10:16.000Z","size":101,"stargazers_count":2,"open_issues_count":2,"forks_count":1,"subscribers_count":4,"default_branch":"master","last_synced_at":"2025-03-28T10:47:32.626Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/linkorb.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2018-04-29T19:25:26.000Z","updated_at":"2024-10-15T06:57:46.000Z","dependencies_parsed_at":"2022-08-31T13:51:10.612Z","dependency_job_id":null,"html_url":"https://github.com/linkorb/tweakjs","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/linkorb%2Ftweakjs","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/linkorb%2Ftweakjs/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/linkorb%2Ftweakjs/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/linkorb%2Ftweakjs/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/linkorb","download_url":"https://codeload.github.com/linkorb/tweakjs/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248970726,"owners_count":21191478,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2025-03-11T21:42:09.517Z","updated_at":"2025-04-14T22:26:59.358Z","avatar_url":"https://github.com/linkorb.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"tweak.js\n========\n\nThis simple javascript library allows you to tweak the DOM of your pages simply by passing it an array of tweaks.\n\n## Use-cases:\n\ntweak.js can be used to quickly implement:\n\n* A/B Testing\n* Text corrections\n* Replace images, styles, etc\n\nAnybody can change tweaks:\n\n* Without changes to the underlying application\n* Without developer support\n* Without delay\n\n## Installation\n```\nnpm install @linkorb/tweakjs\n```\n\n## Demo\n\nCheck the `demo/` directory for an demonstration + example on how to use tweak.js\n\n## How to use\n\nTo support tweak.js in your application, you'll need to include two tags in the `\u003chead /\u003e` of your application:\n\n```html\n\u003cscript type=\"text/javascript\" src=\"../tweak.js\"\u003e\u003c/script\u003e\n```\n`tweak.js` is responsible for parsing and executing the tweaks. \n__Tweaks__ are JavaScript objects which describes how to tweak. Here is an example of an array of tweaks:\n```js\nvar tweaks = [\n    {\n        \"description\": \"Set custom header text\",\n        \"action\": \"setInnerText\",\n        \"selector\": \"h1:first-of-type\",\n        \"value\": \"This is a my custom header text\",\n    },\n    {\n        \"description\": \"Change background color\",\n        \"action\": \"setStyleAttribute\",\n        \"selector\": \"body\",\n        \"attribute\": \"background-color\",\n        \"value\": \"#c0d0e0\",\n    }\n];\n```\nThe __tweaks__ shall be loaded separately.\n\n## Loading tweaks\n\nThere are 3 ways to load tweaks\n1. __Load tweaks from global variable__ - It should simply define a variable called `tweaks` that contains an array of tweak instructions. This array should be loaded before `tweak.js`\n```html\n\u003cscript type=\"text/javascript\" src=\"https://my.host/path/to/my/tweaks.js\"\u003e\u003c/script\u003e\n\u003cscript type=\"text/javascript\" src=\"../tweak.js\"\u003e\u003c/script\u003e\n```\n2. __Load tweaks in the document__ - A variable `tweakjs` is exposed to the global scope. Therefore, after the `tweak.js` gets loaded, you can still add tweaks like this in your HTML:\n```html\n\u003cscript\u003e\ntweakjs.loader.load(\n  [\n    {\n        \"description\": \"Set div text to bold\",\n        \"action\": \"setInnerText\",\n        \"selector\": \".post-load\u003ediv\",\n        \"value\": \"This text is replaced after pageload.\",\n    },\n    {\n        \"description\": \"Set custom inner HTML\",\n        \"action\": \"setInnerHtml\",\n        \"selector\": \".post-load\u003espan\",\n        \"value\": \"\u003ci\u003eItalic\u003c/i\u003e\",\n    }\n  ]\n)\n\u003c/script\u003e\n```\n3. __Load tweaks from external resource__ - Add a URL query parameter `tweaksUrl` to specify an external js file.\n```\nhttp://localhost:8080/demo?tweaksUrl=https://my.host/path/to/my/tweaks.js\n```\n\n## Supported actions\n* setInnerText\n* setInnerHtml\n* setAttribute\n* setStyleAttribute\n* addClass\n* hide\n* show\n* removeClass\n* remove\n* addStyle\n* addScript\n* execute\n\nYou can find demo's of all the actions in the `demo/` directory.\n\n## Build from source\nTo change the source file and build, simply use `webpack`.\n```\n# generates dist/tweak.js\nwebpack -d\n# generates dist/tweak.min.js\nwebpack -p\n```\n\n## Advanced usage\n\n* In A/B testing scenarios, you could have a server generate tweaks.js based on visitor properties\n* You could have your app generate the `tweaks` variable server-side and include it in the script tag's body (instead of the src attribute)\n\n## License\n\nMIT (see [LICENSE](LICENSE))\n\n## Brought to you by the LinkORB Engineering team\n\n\u003cimg src=\"http://www.linkorb.com/d/meta/tier1/images/linkorbengineering-logo.png\" width=\"200px\" /\u003e\u003cbr /\u003e\nCheck out our other projects at [linkorb.com/engineering](http://www.linkorb.com/engineering).\n\nBtw, we're hiring!\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Flinkorb%2Ftweakjs","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Flinkorb%2Ftweakjs","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Flinkorb%2Ftweakjs/lists"}