Bouton Copy Table To Clipboard [Chrome Extension]

**rlelamer** · 05/10/2019, 22h02

Bonjour,
Je tente désespérément de mettre en place un bouton qui copierait un tableau HTML dans le presse papier ce qui m'éviterait la tache du sélectionner / copier avec la souris.

manifest.json

Code JSON :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
 
"permissions": [
        "clipboardWrite"
    ],

dash.html

Code HTML :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
 
<button id="bt_copy">Copy To Clipboard</button>

dash.js

Code JS :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
 
    function copyClipboard(boatrank) {
        var htmlField, range, sel;
        if (document.createRange && window.getSelection) {
            htmlField = document.getElementById(boatrank);
            range = document.createRange();
            sel = window.getSelection();
            sel.removeAllRanges();
            try {
                range.selectNode(htmlField);
                sel.addRange(range);
            } catch (e) {
                range.selectNode(htmlField);
                sel.addRange(range);
            }
            document.execCommand("copy");
        }
        sel.removeAllRanges();
        alert("Copied !");
    }
    [...]
    document.getElementById("bt_copy").addEventListener("click", controller.copyClipboard);

Dans le code source de ma page html, le tableau est sous cette forme

Code HTML :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
 
<div id="boatrank">
    <table class="tableAuto">
        <thead class="sticky">
            <tr>
                <th id="th_name">Skipper</th>
                <th id="th_rank">Rank</th>
            </tr>
        </thead>
        <tbody>
            <tr class="hov">
                <td class="colLeft">need eyes</td>
                <td class="colRight">77</td>
            </tr>
            <tr class="hov">
                <td class="colLeft">85 LE FENNEC</td>
                <td class="colRight">129</td>
            </tr>
            <tr class="hov">
                <td class="colLeft">bellenuit</td>
                <td class="colRight">204</td>
            </tr>
        </tbody>
    </table>
</div>

Ce code fonctionne sous jsfiddle => https://jsfiddle.net/6womj7dx/

mais ne fonctionne pas dans l'extension ... j'ai ceci en console
Nom : Capture d’écran 2019-10-05 à 21.58.31.png
Affichages : 159
Taille : 15,6 Ko

Nom : Capture d’écran 2019-10-05 à 21.58.31.png
Affichages : 159
Taille : 15,6 Ko

Très honnêtement je comprends pas bien de quoi il en retourne et où je fais mal quelque chose ... Si on peut m'expliquer et m'aiguiller, ça serait bienvenue

**Beginner.** · 06/10/2019, 00h08

Salut,

La table et le bouton sont dans des pages différentes ? Es-tu sûr que ton JS s’exécute dans la page où se trouve la table ?

**rlelamer** · 06/10/2019, 01h16

J'ai copié le code source de la page et je l'ai épuré pour mettre en avant la structure.

Code HTML :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
 
<html>
<head> ... </head>
<body>
    <div class="container">
        <div class="top">
            <div class="flexrow"> ... </div>
            <div id="raceStatus"> ... </div>
            <div style="display: inline">...</div>
            <div style="display: inline">
                &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;
                <fieldset class="fieldset" id="sel_skippers" align="left" style="position: absolute; visibility: hidden;"> ... </fieldset>
                <fieldset class="fieldset" id="sel_importRoute" align="left" style="position: absolute; visibility: hidden;"> ... </fieldset>
                <button id="bt_copy" style="position: absolute; visibility: visible;">Copy To Clipboard</button>
                <fieldset class="fieldset" id="sel_ranking" align="left" style="position: absolute; visibility: hidden;"> ... </fieldset>
            </div>
        </div>
        <div id="tab-content1" class="content" style="display: none; height: 766px;"> ... </div>
        <div id="tab-content2" class="content hidden" style="display: none; height: 766px;"> ... </div>
        <div id="tab-content3" class="content hidden" style="display: none; height: 766px;"> ... </div>
        <div id="tab-content4" class="content hidden" style="display: none; height: 653.25px;"> ... </div>
        <div id="tab-content5" class="content hidden" style="display: block; height: 766px;">
            <div id="boatrank">
                <table class="tableAuto">
                    <thead class="sticky">
                        <tr>
                            <th id="th_name">Skipper</th>
                            <th id="th_rank">Rank</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr class="hov">
                            <td class="colLeft">need eyes</td>
                            <td class="colRight">8692</td>
                        </tr>
                        <tr class="hov">
                            <td class="colLeft">85 LE FENNEC</td>
                            <td class="colRight">9044</td>
                        </tr>
                        <tr class="hov">
                            <td class="colLeft">bellenuit</td>
                            <td class="colRight">9243</td>
                        </tr>
                    </tbody>
                </table>
            </div>
        </div>
        <div id="tab-content6" class="content hidden" style="display: none; height: 766px;"> ... </div>
    </div>
</body>
</html>

La table et le bouton sont dans des pages différentes ?

Non

Es-tu sûr que ton JS s’exécute dans la page où se trouve la table ?

Par déduction je dirais oui, j'ai une page avec plusieurs onglets mais c'est surement là que se trouve le soucis ...

**rlelamer** · 06/10/2019, 02h00

J'ai trouvé la solution

Tu m'as fait réfléchir sur cette histoire de JS qui s'exécute sur la page et avec la structure de celle ci ça m'a sauté aux yeux ... boatrank est un id donc il se note "boatrank" et je n'ai pas besoin de spécifier d'argument.

Code JS :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
 
    function copyClipboard() {
        var htmlField, range, sel;
        if (document.createRange && window.getSelection) {
            htmlField = document.getElementById("boatrank");
            range = document.createRange();
            sel = window.getSelection();
            sel.removeAllRanges();
            try {
                range.selectNode(htmlField);
                sel.addRange(range);
            } catch (e) {
                range.selectNode(htmlField);
                sel.addRange(range);
            }
            document.execCommand("copy");
        }
        sel.removeAllRanges();
        alert("Copied !");

Merci de m'avoir mis sur la piste

Bouton Copy Table To Clipboard [Chrome Extension]

JavaScript

Discussions similaires

Partager

Partager