xgqfrms commented 5 years ago

Chrome & extensions

https://chrome.google.com/webstore/category/extensions https://support.google.com/chrome_webstore/answer/2664769?hl=en

xgqfrms commented 5 years ago

how to write a chrome extension

https://www.cnblogs.com/xgqfrms/p/10017780.html https://github.com/xyzdata/RAIO/issues/215#issue-272066876

xgqfrms commented 5 years ago

chrome extensions & android

https://chrome.google.com/webstore

https://www.digitbin.com/install-chrome-extensions-android/

xgqfrms commented 5 years ago

how to read browser console error in js?

https://stackoverflow.com/questions/19846078/how-to-read-from-chromes-console-in-javascript

xgqfrms commented 5 years ago

HTTP/2 & HTTPS

https://zhuanlan.zhihu.com/p/24126955

xgqfrms commented 5 years ago

Chrome & extensions & demo

chrome://extensions/

https://github.com/xgqfrms/Angular-2018/tree/master/000-xyz/Chrome/chrome-app

steps

OK

bug

H5 DnD & Error

popup.js


// Copyright (c) 2012 The Chromium Authors. All rights reserved.
// Use of this source code is governed by a BSD-style license that can be
// found in the LICENSE file.

function click(e) {
    chrome.tabs.executeScript(null,{
        code: "document.body.style.backgroundColor='" + e.target.id + "'",
    });
    window.close();
}

document.addEventListener('DOMContentLoaded', function () {
    var divs = document.querySelectorAll('div');
    for (var i = 0; i < divs.length; i++) {
        divs[i].addEventListener('click', click);
    }
});

manifest.json


{
    "name": "A browser action with a popup that changes the page color",
    "description": "Change the current page color",
    "version": "1.0",
    "permissions": [
        "tabs",
        "http://*/*",
        "https://*/*"
    ],
    "browser_action": {
        "default_title": "Set this page's color.",
        "default_icon": "icon.png",
        "default_popup": "popup.html"
    },
    "manifest_version": 2
}

popup.html

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Set Page Color Popup</title>
    <link rel="stylesheet" href="popup.css">
</head>

<body>
    <div id="red">red</div>
    <div id="blue">blue</div>
    <div id="green">green</div>
    <div id="yellow">yellow</div>
    <script src="popup.js"></script>
</body>

</html>

popup.css

body {
    overflow: hidden;
    margin: 0px;
    padding: 0px;
    background: white;
}

div:first-child {
    margin-top: 0px;
}

div {
    cursor: pointer;
    text-align: center;
    padding: 1px 3px;
    font-family: sans-serif;
    font-size: 0.8em;
    width: 100px;
    margin-top: 1px;
    background: #cccccc;
}

div:hover {
    background: #aaaaaa;
}

#red {
    border: 1px solid red;
    color: red;
}

#blue {
    border: 1px solid blue;
    color: blue;
}

#green {
    border: 1px solid green;
    color: green;
}

#yellow {
    border: 1px solid yellow;
    color: yellow;
}

xgqfrms commented 5 years ago

chrome.tabs.executeScript

https://developer.chrome.com/tabs https://developers.chrome.com/extensions/getstarted https://developer.chrome.com/extensions/activeTab

https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions/API/tabs/executeScript https://www.reddit.com/r/learnprogramming/comments/1rueae/chrome_extension_chrometabsexecutescript_just/ https://stackoverflow.com/questions/28760463/how-to-use-console-log-when-debugging-tabs-executescript

xgqfrms commented 5 years ago

https://www.cnblogs.com/xgqfrms/p/10017780.html https://github.com/xyz-data/darkreader

xgqfrms commented 5 years ago

https://github.com/xyz-data/darkreader/blob/master/src/manifest.json


{
  // Required
  "manifest_version": 2,
  "name": "My Extension",
  "version": "versionString",

  // Recommended
  "default_locale": "en",
  "description": "A plain text description",
  "icons": {...},

  // Pick one (or none)
  "browser_action": {...},
  "page_action": {...},

  // Optional
  "action": ...,
  "author": ...,
  "automation": ...,
  "background": {
    // Recommended
    "persistent": false,
    // Optional
    "service_worker_script":
  },
  "chrome_settings_overrides": {...},
  "chrome_ui_overrides": {
    "bookmarks_ui": {
      "remove_bookmark_shortcut": true,
      "remove_button": true
    }
  },
  "chrome_url_overrides": {...},
  "commands": {...},
  "content_capabilities": ...,
  "content_scripts": [{...}],
  "content_security_policy": "policyString",
  "converted_from_user_script": ...,
  "current_locale": ...,
  "declarative_net_request": ...,
  "devtools_page": "devtools.html",
  "event_rules": [{...}],
  "externally_connectable": {
    "matches": ["*://*.example.com/*"]
  },
  "file_browser_handlers": [...],
  "file_system_provider_capabilities": {
    "configurable": true,
    "multiple_mounts": true,
    "source": "network"
  },
  "homepage_url": "http://path/to/homepage",
  "import": [{"id": "aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa"}],
  "incognito": "spanning, split, or not_allowed",
  "input_components": ...,
  "key": "publicKey",
  "minimum_chrome_version": "versionString",
  "nacl_modules": [...],
  "oauth2": ...,
  "offline_enabled": true,
  "omnibox": {
    "keyword": "aString"
  },
  "optional_permissions": ["tabs"],
  "options_page": "options.html",
  "options_ui": {
    "chrome_style": true,
    "page": "options.html"
  },
  "permissions": ["tabs"],
  "platforms": ...,
  "requirements": {...},
  "sandbox": [...],
  "short_name": "Short Name",
  "signature": ...,
  "spellcheck": ...,
  "storage": {
    "managed_schema": "schema.json"
  },
  "system_indicator": ...,
  "tts_engine": {...},
  "update_url": "http://path/to/updateInfo.xml",
  "version_name": "aString",
  "web_accessible_resources": [...]
}

xgqfrms commented 5 years ago

https://github.com/hartleybrody/buzzkill

xgqfrms commented 5 years ago

https://stackoverflow.com/questions/8293465/chrome-extension-injecting-code-which-references-a-script-that-i-am-also-inject


chrome.tabs.executeScript(null, { 
  code: "document.body.appendChild(document.createElement('script')).src='" + 
    chrome.extension.getURL("demo.js") +"';" 
}, null);

x

xgqfrms commented 5 years ago

textarea & input

https://www.w3schools.com/tags/tag_input.asp https://www.w3schools.com/tags/att_input_type.asp


<textarea rows="4" cols="50">
    At w3schools.com you will learn how to make a website. 
</textarea>

<textarea rows="4" cols="50" name="msg" data-msg="all" placeholder="请输入增量代码同步说明" class="layui-input"></textarea>

https://www.w3schools.com/tags/tag_textarea.asp https://www.w3schools.com/tags/tryit.asp?filename=tryhtml_textarea

xgqfrms commented 5 years ago

async & await & promise

chrome://extensions/


        async getNews() {
            try {
                const response = await fetch(`https://raw.githubusercontent.com/darkreader/darkreader.org/master/src/blog/posts.json?nocache=${Date.now()}`, { cache: 'no-cache' });
                const $news = await response.json();
                return new Promise((resolve, reject) => {
                    chrome.storage.sync.get({ readNews: [] }, ({ readNews }) => {
                        const news = $news.map(({ id, date, headline }) => {
                            const url = getBlogPostURL(id);
                            const read = this.isRead(id, readNews);
                            return { id, date, headline, url, read };
                        });
                        for (let i = 0; i < news.length; i++) {
                            const date = new Date(news[i].date);
                            if (isNaN(date.getTime())) {
                                reject(new Error(`Unable to parse date ${date}`));
                                return;
                            }
                        }
                        resolve(news);
                    });
                });
            }
            catch (err) {
                console.error(err);
                return null;
            }
        }

xgqfrms / FEIQA

Chrome & extensions #70

Chrome & extensions

how to write a chrome extension

chrome extensions & android

how to read browser console error in js?

HTTP/2 & HTTPS

Chrome & extensions & demo

bug

chrome.tabs.executeScript

textarea & input

async & await & promise