Created
June 27, 2019 05:52
-
-
Save jokandre/84a7d27ec7445a15f47ea7d1ae4a8a81 to your computer and use it in GitHub Desktop.
Simple chrome extension selecting text from page
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| #zh-ext-container { | |
| /* height: 40px; */ | |
| position: fixed; | |
| bottom:0%; | |
| width:100%; | |
| background-color: rgb(230, 230, 230); | |
| opacity: 1; | |
| } |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| function removeRow(input) { | |
| document.getElementsByTagName("body")[0].removeChild(input.parentNode); | |
| } | |
| Vue.component('button-counter', { | |
| props: { | |
| text: { | |
| type: String, | |
| default: "" | |
| } | |
| }, | |
| data: function () { | |
| return { | |
| count: 0 | |
| } | |
| }, | |
| template: ` | |
| <div v-if="text !==''"> | |
| <span>{{text}}</span> | |
| </div> | |
| ` | |
| }) | |
| function addContainer(){ | |
| var div = document.createElement('div'); | |
| div.id = 'zh-ext-container'; | |
| div.innerHTML = ` | |
| <button-counter :text="selectedText"></button-counter> | |
| `; | |
| document.getElementsByTagName("body")[0].appendChild(div); | |
| } | |
| window.onload = function(){ | |
| addContainer(); | |
| var zhExt = new Vue({ | |
| el: '#zh-ext-container', | |
| created: function () { | |
| // `this` points to the vm instance | |
| var self = this; | |
| document.addEventListener('mouseup', function(e) { | |
| self.selectedText = self.getSelectedParagraphText(); | |
| }); | |
| }, | |
| data: { | |
| selectedText: "" | |
| }, | |
| computed: { | |
| currentComponent: function () { | |
| return 'button-counter' | |
| } | |
| }, | |
| watch: { | |
| // whenever question changes, this function will run | |
| selectedText: function (newval, oldval) { | |
| if(newval.length>0){ | |
| this.updateComponent(newval) | |
| }else{ | |
| this.closeComponent() | |
| } | |
| } | |
| }, | |
| methods: { | |
| getSelectedParagraphText:function() { | |
| if (window.getSelection) { | |
| selection = window.getSelection(); | |
| } else if (document.selection) { | |
| selection = document.selection.createRange(); | |
| } | |
| return selection.toString(); | |
| }, | |
| updateComponent: function (text) { | |
| console.log(text) | |
| }, | |
| closeComponent: function(){ | |
| console.log("close component") | |
| } | |
| } | |
| }) | |
| // document.addEventListener('mouseup', function(e) { | |
| // // console.log(e) | |
| // // var key = e.keyCode || e.which; if (key == 16) highlight(); | |
| // var selectedText = getSelectedParagraphText(); | |
| // if(selectedText.length>0){ | |
| // console.log(selectedText) | |
| // addRow() | |
| // } | |
| // }); | |
| } |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| { | |
| "manifest_version": 2, | |
| "name": "Chinese Extension", | |
| "version": "0.1", | |
| "content_scripts": [ | |
| { | |
| "matches": [ | |
| "<all_urls>" | |
| ], | |
| "css":[ | |
| // "js/bootstrap-4.3.1/css/bootstrap.min.csss", | |
| "content.css"], | |
| "js": ["js/vue.js","content.js"], | |
| "run_at": "document_end" | |
| } | |
| ] | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment