iT邦幫忙

0

如何使用JavaScript+Tampermonkey將當前網頁轉換為閱讀模式?

  • 分享至 

  • xImage

原本Edge是在瀏覽的時候會出現閱讀器的按鈕,
不過後來變成要在網址前輸入read://才能啟動閱讀模式非常不方便,
於是分別丟給chatgpt/bard/bing/claude2/Chatsonic想他們寫程式
來不過回跟他們周旋很久,結果都是沒法正常啟動閱讀模式的。


給他們的指令是:

請你寫Script可以在Tampermonkey中使用,功能是在網頁的左上方顯示出一個按鍵[ADD],按鈕要有外框,外框底色是黑色,ADD的字是白色的
,然後當按下[ADD]時,將當前的網址列的最前面增加read://

他給出的程式碼如下

// ==UserScript==
// @name         Open Read Mode
// @namespace    http://tampermonkey.net/
// @version      0.1
// @description  Click [ADD] button to navigate to the URL with "read://" prefix
// @author       You
// @match        *://*/*
// @grant        none
// ==/UserScript==

(function() {
    'use strict';

    // Create the [ADD] button element
    const addButton = document.createElement('button');
    addButton.innerText = 'ADD';
    addButton.style.position = 'fixed';
    addButton.style.top = '10px';
    addButton.style.left = '10px';
    addButton.style.padding = '5px 10px';
    addButton.style.border = '2px solid black';
    addButton.style.backgroundColor = 'black';
    addButton.style.color = 'white';
    addButton.style.zIndex = '9999';

    // Append the [ADD] button to the body
    document.body.appendChild(addButton);

    // Add event listener for the [ADD] button click
    addButton.addEventListener('click', function() {
        // Get the current URL
        const currentURL = window.location.href;

        // Check if the URL already starts with 'read://'
        if (!currentURL.startsWith('read://')) {
            // Add the 'read://' prefix to the URL
            const newURL = 'read://' + currentURL;

            // Navigate to the new URL
            window.location.assign(newURL);
        }
    });
})();

但由於最終都沒有能正常啟動閱讀模式,於是我請他改為在我按下[ADD]後,跳轉到google.com

// ==UserScript==
// @name         Open Read Mode
// @namespace    http://tampermonkey.net/
// @version      0.1
// @description  Click [ADD] button to navigate to www.google.com
// @author       You
// @match        *://*/*
// @grant        none
// ==/UserScript==

(function() {
    'use strict';

    // Create the [ADD] button element
    const addButton = document.createElement('button');
    addButton.innerText = 'ADD';
    addButton.style.position = 'fixed';
    addButton.style.top = '10px';
    addButton.style.left = '10px';
    addButton.style.padding = '5px 10px';
    addButton.style.border = '2px solid black';
    addButton.style.backgroundColor = 'black';
    addButton.style.color = 'white';
    addButton.style.zIndex = '9999';

    // Append the [ADD] button to the body
    document.body.appendChild(addButton);

    // Add event listener for the [ADD] button click
    addButton.addEventListener('click', function() {
        // Navigate to www.google.com
        window.location.href = 'https://www.google.com/';
    });
})();

這樣是可以正確跳轉到google的


https://ithelp.ithome.com.tw/upload/images/20230801/201343148kWfB8JF2l.png

我想問問各位,增加read://這邊是語法哪裡有錯誤,該如何修正比較好呢

圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

2 個回答

0
史帝夫
iT邦新手 3 級 ‧ 2023-08-01 10:29:06
最佳解答

從主控台可看到當按下按鈕後會出現

Not allowed to load local resource: read://https//www.ithome.com.tw/news/158019

看起來是瀏覽器限制不允許開啟...
那可試著換個方向,將跳轉方式改成顯示新網址在旁邊,由自己右鍵另開該頁面來略過這限制

像這樣...

// ==UserScript==
// @name         Open Read Mode
// @namespace    http://tampermonkey.net/
// @version      0.1
// @description  Click [ADD] button to navigate to the URL with "read://" prefix
// @author       You
// @match        *://*/*
// @grant        none
// ==/UserScript==

(function() {
    'use strict';

    // Create the [ADD] button element
    const addButton = document.createElement('button');
    addButton.innerText = 'ADD';
    addButton.style.position = 'fixed';
    addButton.style.top = '10px';
    addButton.style.left = '10px';
    addButton.style.padding = '5px 10px';
    addButton.style.border = '2px solid black';
    addButton.style.backgroundColor = 'black';
    addButton.style.color = 'white';
    addButton.style.zIndex = '9999';

    // Append the [ADD] button to the body
    document.body.appendChild(addButton);

    // Function to add a hyperlink next to the [ADD] button
    function addHyperlink(url) {
        const hyperlink = document.createElement('a');
        hyperlink.href = url;
        hyperlink.textContent = url;
        hyperlink.style.display = 'block';
        hyperlink.style.position = 'fixed';
        hyperlink.style.top = '10px';
        hyperlink.style.left = '80px';
        hyperlink.style.padding = '5px';
        hyperlink.style.border = '1px solid black';
        hyperlink.style.backgroundColor = 'white';
        hyperlink.style.zIndex = '9999';
        document.body.appendChild(hyperlink);
    }

    // Add event listener for the [ADD] button click
    addButton.addEventListener('click', function() {
        // Get the current URL
        const currentURL = window.location.href;

        // Check if the URL already starts with 'read://'
        if (!currentURL.startsWith('read://')) {
            // Add the 'read://' prefix to the URL
            const newURL = 'read://' + currentURL;
            window.open(newURL);
            // Create a hyperlink for manual access
            addHyperlink(newURL);
        }
    });
})();
看更多先前的回應...收起先前的回應...
辰辰 iT邦新手 4 級 ‧ 2023-08-01 18:02:30 檢舉

感謝提供其他方式,在功能方面如果改成
直接按下新網址就自動開啟
也是不可行的嗎(因為這樣感覺上步驟多了些,使用上就沒那麼方便了)

辰辰 iT邦新手 4 級 ‧ 2023-08-01 18:22:01 檢舉

紫色

史帝夫 iT邦新手 3 級 ‧ 2023-08-02 15:23:40 檢舉

想從瀏覽器發起的跳轉、超連結、開分頁...看起來就是都會被擋住
畢竟read://可開啟的不只網址、檔案啥的都行,所以卡控也挺合理的,避免不必要的意外...

史帝夫 iT邦新手 3 級 ‧ 2023-08-02 17:26:55 檢舉

OK,或許這方式會比較接近你要的,改用其他瀏覽器去開啟,這樣就能點擊按鈕時直接開啟edge那頁面,缺點就是會用到兩個瀏覽器這樣

https://ithelp.ithome.com.tw/upload/images/20230802/201077440N9v7MIdSW.png

辰辰 iT邦新手 4 級 ‧ 2023-08-02 22:24:24 檢舉

可以看一下您修改後的程式碼嗎

辰辰 iT邦新手 4 級 ‧ 2023-08-02 22:27:46 檢舉

另外我想到很多網頁都有廣告只要一點擊,
就會在同一瀏覽器中跳出彈窗
(例如點擊後就會有廣告彈窗)
這適用和種方法實現的呢?

史帝夫 iT邦新手 3 級 ‧ 2023-08-04 09:14:58 檢舉

程式碼就一樣是上面那個沒有變,瀏覽器我用的是chrome,藉由他去開啟edge
至於廣告應該可以用一些adblock的plugin去擋吧

0
hokou
iT邦好手 1 級 ‧ 2023-08-01 10:37:32

我猜是因為安全性考量,不給連
類似這種
https://superuser.com/questions/1697167/edge-settings-shortcut-url-not-working-in-custom-html-code

以這個為例 https://code.visualstudio.com/docs
會出現下面錯誤
Not allowed to load local resource: read://https//code.visualstudio.com/docs

一般是轉換相對路徑或是 http://localhost 之類的
read:// 還沒找到要怎麼處理

可以用快捷鍵 F9,不過我發現要等一下
似乎也不是每個網址都會出現

== 補充
也許可以結合這篇 [javascript] 複製內容至剪貼簿
將轉換後的網址放到剪貼簿,再自己手動貼上

// 前略
    addButton.addEventListener('click', function() {
        // Get the current URL
        const currentURL = window.location.href;

        // Check if the URL already starts with 'read://'
        if (!currentURL.startsWith('read://')) {
            // Add the 'read://' prefix to the URL
            const newURL = 'read://' + currentURL;

            // Copy Url to Clipboard
            let dummy = document.createElement('input'),
            document.body.appendChild(dummy);
            dummy.value = newURL;
            dummy.select();
            document.execCommand('copy');
            document.body.removeChild(dummy);
        }
    });
辰辰 iT邦新手 4 級 ‧ 2023-08-01 20:11:21 檢舉

應該是安全性問題沒錯...不過如果要手動貼上就失去快捷鍵的用意了~是希望有其他解法能啟動edge的閱讀模式

hokou iT邦好手 1 級 ‧ 2023-08-02 07:56:06 檢舉

安全性問題看來是無解,這代表要讓瀏覽器控制你的電腦
除非把瀏覽器的安全性關掉
試過像 alert 或 a 連結這類直連的都會被擋

辰辰 iT邦新手 4 級 ‧ 2023-08-03 04:17:59 檢舉

edge的閱讀模式除了read:// ,還能有其他方式強制啟用嗎...

我要發表回答

立即登入回答